Lists

Lists Shortcodes

Check out all the Lists options.


Icons

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="row">
    <div class="col-md-6">
        <ul class="list list-icons">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-reverse">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
</div>
<div class="row mt-xlg">
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-2">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-2 list-icons-reverse">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
</div>
<div class="row mt-xlg">
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-3">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-3 list-icons-reverse">
            <li><em class="fa fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
            <li><em class="fa fa-cloud-download"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
            <li><em class="fa fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
        </ul>
    </div>
</div>

Sizes

  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="row">
    <div class="col-md-6">
        <ul class="list list-icons list-icons-sm">
            <li><em class="fa fa-caret-right"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-lg">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-sm list-icons-reverse">
            <li><em class="fa fa-caret-left"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-lg list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
</div>
<div class="row mt-xlg">
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-2 list-icons-sm">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-2">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-2 list-icons-lg">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-2 list-icons-sm list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-2 list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-2 list-icons-lg list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
</div>
<div class="row mt-xlg">
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-3 list-icons-sm">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-icons-lg">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul class="list list-icons list-icons-style-3 list-icons-sm list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-icons-lg list-icons-reverse">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
</div>

Colors

  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.
  • Fusce sit amet orci quis.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="row">
    <div class="col-md-4">
        <ul class="list list-icons list-primary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-secondary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-tertiary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-quaternary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
    </div>
    <div class="col-md-4">
        <ul class="list list-icons list-icons-style-3 list-primary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-secondary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-tertiary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-quaternary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
    </div>
    <div class="col-md-4">
        <ul class="list list-icons list-icons-style-3 list-primary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-secondary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-tertiary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
        <ul class="list list-icons list-icons-style-3 list-quaternary">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis.</li>
        </ul>
    </div>
</div>

With Borders

  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.

Animations

  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.
  • Fusce sit amet orci quis arcu vestibulum vestibulum.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="row">
    <div class="col-md-6">
        <h4>With Borders</h4>
        <ul class="list list-icons list-primary list-borders">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
        <ul class="list list-icons list-primary list-side-borders mt-xlg">
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
    <div class="col-md-6">
        <h4>Animations</h4>
        <ul class="list list-icons list-primary">
            <li data-appear-animation="fadeInUp" data-appear-animation-delay="0"><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li data-appear-animation="fadeInUp" data-appear-animation-delay="300"><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li data-appear-animation="fadeInUp" data-appear-animation-delay="600"><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li data-appear-animation="fadeInUp" data-appear-animation-delay="900"><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
            <li data-appear-animation="fadeInUp" data-appear-animation-delay="1200"><em class="fa fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
        </ul>
    </div>
</div>

Ordered

  1. Lorem ipsum dolor
  2. Consectetur adipi
  3. Integer molestie
  4. Facilisis in pre
  5. Faucibus porta la
  1. Lorem ipsum dolor
  2. Consectetur adipi
  3. Integer molestie
  4. Facilisis in pre
  5. Faucibus porta la
  1. Lorem ipsum
  2. Consectetur adipi
  3. Integer molestie
  4. Facilisis in pre
  5. Faucibus porta la
  1. Lorem ipsum
  2. Consectetur adipi
  3. Integer molestie
  4. Facilisis in pre
  5. Faucibus porta la

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="row">
    <div class="col-md-3">
        <ol>
            <li>Lorem ipsum dolor</li>
            <li>Consectetur adipi</li>
            <li>Integer molestie</li>
            <li>Facilisis in pre</li>
            <li>Faucibus porta la</li>
        </ol>
    </div>
    <div class="col-md-3">
        <ol class="list list-ordened">
            <li>Lorem ipsum dolor</li>
            <li>Consectetur adipi</li>
            <li>Integer molestie</li>
            <li>Facilisis in pre</li>
            <li>Faucibus porta la</li>
        </ol>
    </div>
    <div class="col-md-3">
        <ol class="list list-ordened list-ordened-style-2">
            <li>Lorem ipsum</li>
            <li>Consectetur adipi</li>
            <li>Integer molestie</li>
            <li>Facilisis in pre</li>
            <li>Faucibus porta la</li>
        </ol>
    </div>
    <div class="col-md-3">
        <ol class="list list-ordened list-ordened-style-3">
            <li>Lorem ipsum</li>
            <li>Consectetur adipi</li>
            <li>Integer molestie</li>
            <li>Facilisis in pre</li>
            <li>Faucibus porta la</li>
        </ol>
    </div>
</div>

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="row">
    <div class="col-md-4">
        <h4>Unordered</h4>
        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>
                Nulla volutpat aliquam velit
                <ul>
                    <li>Phasellus iaculis neque</li>
                    <li>Purus sodales ultricies</li>
                    <li>Vestibulum laoreet porttitor sem</li>
                    <li>Ac tristique libero volutpat at</li>
                </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
    <div class="col-md-4">
        <h4>Unstyled</h4>
        <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
    <div class="col-md-4">
        <h4>Description</h4>
        <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
        </dl>
    </div>
</div>