Lists

1
2
3
4
5
6
7

<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>

1
2
3
4
5
6
7

<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>

1
2
3
4
5
6
7

<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>

1
2
3
4
5
6
7

<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<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>

1
2
3
4
5
6
7
8
9

<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>

1
2
3
4
5
6
7
8
9

<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<ul class="list list-icons">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

<ul class="list list-icons list-icons-style-2">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

<ul class="list list-icons list-icons-style-3">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<ul class="list list-icons list-icons-reverse">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

<ul class="list list-icons list-icons-style-2 list-icons-reverse">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

<ul class="list list-icons list-icons-style-3 list-icons-reverse">
    <li><em class="fas fa-check"></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li><em class="fas fa-cloud-download-alt"></em> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li><em class="fas fa-envelope"></em> Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

 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

<ul class="list list-icons list-icons-sm">
    <li><em class="fas fa-caret-right"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>
<ul class="list list-icons">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>
<ul class="list list-icons list-icons-lg">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

<ul class="list list-icons list-icons-style-2 list-icons-sm">
    <li><em class="fas 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="fas 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="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

<ul class="list list-icons list-icons-style-3 list-icons-sm">
    <li><em class="fas 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="fas 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="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

 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

<ul class="list list-icons list-icons-sm list-icons-reverse">
    <li><em class="fas 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="fas 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="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

<ul class="list list-icons list-icons-style-2 list-icons-sm list-icons-reverse">
    <li><em class="fas 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="fas 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="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

<ul class="list list-icons list-icons-style-3 list-icons-sm list-icons-reverse">
    <li><em class="fas 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="fas 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="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul class="list list-icons list-primary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-secondary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-tertiary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-quaternary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul class="list list-icons list-icons-style-3 list-primary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-secondary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-tertiary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-quaternary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul class="list list-icons list-icons-style-3 list-primary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-secondary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-tertiary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>
<ul class="list list-icons list-icons-style-3 list-quaternary">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis.</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<ul class="list list-icons list-primary list-borders">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

<ul class="list list-icons list-primary list-side-borders">
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>

1
2
3
4
5
6
7

<ul class="list list-icons list-primary">
    <li data-appear-animation="fadeInUp" data-appear-animation-delay="0"><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li data-appear-animation="fadeInUp" data-appear-animation-delay="300"><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li data-appear-animation="fadeInUp" data-appear-animation-delay="600"><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li data-appear-animation="fadeInUp" data-appear-animation-delay="900"><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
    <li data-appear-animation="fadeInUp" data-appear-animation-delay="1200"><em class="fas fa-check"></em> Fusce sit amet orci quis arcu vestibulum vestibulum.</li>
</ul>