Lists

Unordered List

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

    
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
    
  

Ordered List

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

    
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
    
  

Unstyled List

Remove the default list-style and left margin on list items by applying .list-unstyled to the list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

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

Inline List

Place all list items on a single line by applying .list-inline to the list.

    
<ul class="list-inline">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
    
  

Comma Separated List

Separate items in a list with a comma by adding .list-comma to the list.

    
<ul class="list-comma">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
    
  

Description List

A description list is a list of terms, with a description of each term.

    
<dl>
  <dt>Term</dt>
  <dd>The definition</dd>
  <dt>Term</dt>
  <dd>The definition</dd>
  <dt>Term</dt>
  <dd>The definition</dd>
</dl>
    
  

List Info

This pattern is useful for displaying name—value pairs. Use .list-info on an <ul>, and wrap the label in .info-label and value in .info-value.

    
<ul class="list-info">
  <li>
    <div class="info-label">name</div>
    <div class="info-value">value</div>
  </li>
</ul>