Lists

 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>

 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>

 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>

 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>

 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>

 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>