Customizing list styles

Tom Cook
Tom Cook

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.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.