Toggle navigation

Basics

Lists

Unordered list

A list of items in which the order does not explicitly matter.

  • List item 1
  • List item 2
  • List item 3
    • Nested list item 1
    • Nested list item 2
  • List item 4
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ul>
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ul>
    </li>
    <li>List item 4</li>
</ul>

Bulleted, or unordered , lists show a loose association with no sequential meaning.

Mark up lists correctly, using unordered lists. Do not use line breaks instead.

Top of page

Ordered list

A list of items in which the order does explicitly matter.

  1. List item 1
  2. List item 2
  3. List item 3
    1. Nested list item 1
    2. Nested list item 2
  4. List item 4
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ol>
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Ordered lists show a sequentially-based association between items.

Mark up lists correctly, using ordered lists. Do not use line breaks instead.

Top of page

Ordered list with decimal styling

  1. List item 1
  2. List item 2
  3. List item 3
    1. Nested list item 1
    2. Nested list item 2
  4. List item 4
<ol class="decimal">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ol class="decimal">
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Ordered lists show a sequentially-based association between items.

Use the class decimal to number lists using decimal numbers.

Mark up lists correctly, using unordered or ordered lists. Do not use line breaks instead.

Top of page

Ordered list with roman styling

  1. List item 1
  2. List item 2
  3. List item 3
    1. Nested list item 1
    2. Nested list item 2
  4. List item 4
<ol class="roman">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ol class="roman">
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Ordered lists show a sequentially-based association between items.

Use the class roman to number lists using roman numbers.

Mark up lists correctly, using unordered or ordered lists. Do not use line breaks instead.

Top of page

Ordered list with latin styling

  1. List item 1
  2. List item 2
  3. List item 3
    1. Nested list item 1
    2. Nested list item 2
  4. List item 4
<ol class="latin">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ol class="latin">
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Ordered lists show a sequentially-based association between items.

Use the class latin to number lists using latin letters.

Mark up lists correctly, using unordered or ordered lists. Do not use line breaks instead.

Top of page

Unstyled lists

  • List item 1
  • List item 2
  • List item 3
<ul class="list-unstyled">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Use the class list-unstyled to remove the default left margin.

Mark up lists correctly, using ordered lists. Do not use line breaks instead.

Top of page

Inline lists

  • List item 1
  • List item 2
  • List item 3
<ul class="list-inline">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Use the class list-inline to place all list items on a single line.

Mark up lists correctly, using unordered or ordered lists. Do not use line breaks instead.

Top of page

Definition lists

A list of terms with their associated definitions.

Definition lists
A definition 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.
<dl>
    <dt>Definition lists</dt>
    <dd>A definition 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>

Use a defintion list to mark up pairs of related items. The pairs themselves are a logically related list.

Mark up lists correctly, using definition lists. Do not use line breaks instead.

Top of page

Horizontal definition lists

Definition lists
A definition 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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal dl-left">
    <dt>Definition lists</dt>
    <dd>A definition 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>
    <dt>Felis euismod semper eget lacinia</dt>
    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

Use a defintion list to mark up pairs of related items. The pairs themselves are a logically related list.

Use the class dl-horizontal to line up terms and descriptions side-by-side.

Use the class dl-horizontal with dl-left to line up terms to the left.

Items are stacked on small devices.

Mark up lists correctly, using definition lists. Do not use line breaks instead.

Top of page

List with icons

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
<ul class="list-unstyled">
    <li><span class="fa fa-check fg-green" aria-hidden="true"></span> List item 1</li>
    <li><span class="fa fa-check fg-green" aria-hidden="true"></span> List item 2</li>
    <li><span class="fa fa-check fg-green" aria-hidden="true"></span> List item 3</li>
    <li><span class="fa fa-check fg-green" aria-hidden="true"></span> List item 4</li>
    <li><span class="fa fa-check fg-green" aria-hidden="true"></span> List item 5</li>
</ul>

Bulleted, or unordered , lists show a loose association with no sequential meaning.

Mark up lists correctly, using unordered lists. Do not use line breaks instead.

Top of page

Changelog

Added Updates Current version Accessibility Status
31 Aug 2016
  • 19 February 2018 - Added dl-left
  • 17 Jul 2017 - Added list with icons
 1.1.1 Accessible Current

Top of page