Customizing list styles

Use .list-unstyled to remove the default styling from <ol> and <ul> elements.

• List item
• List item
• List item

<ul class="list-unstyled">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Use .list-item to add additional space around each list item.

• List item
• List item
• List item

<ul class="list-unstyled">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ul>

• Lorem ipsum dolor sit amet, adipiscing elit.
• Nulla vitae elit libero, a pharetra augue.
  • Donec id elit non mi porta gravida at eget metus.
  • Quisque fringilla elit quis purus consectetur.

<ul>
  <li class="list-item">Lorem ipsum dolor sit amet, adipiscing elit.</li>
  <li class="list-item">Nulla vitae elit libero, a pharetra augue.
    <ul>
      <li class="list-item">Donec id elit non mi porta gravida at eget metus.</li>
      <li class="list-item">Quisque fringilla elit quis purus consectetur.</li>
    </ul>
  </li>
</ul>

List style utilities provide additional control over the look-and-feel of lists.

Numbered list

Use .list-number to apply a custom numbered style to a list.

1. List item
2. List item
3. List item

<ol class="list-number">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ol>

Check list

Use .list-check to apply a custom checklist style to a list.

• List item
• List item
• List item

<ul class="list-check">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ul>

Divider list

Use .divider-list to present list items in a horizontal list separated by a divider.

• List item
• List item
• List item

<ul class="list-divider">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

The data-divider attribute allows you to override the divider applied before a given list item:

• List item
• List item
• List item

<ul class="list-divider">
  <li>List item</li>
  <li data-divider=">">List item</li>
  <li data-divider="/">List item</li>
</ul>

We use this element in our themes to present call-to-actions, menus and lists of articles.