Lists

Unordered List

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

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

Ordered List

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

  1. item 1
  2. item 2
  3. item 3
    
<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.

  • unstyled item
  • unstyled item
    • nested list item
    • nested list item
    • nested list item
  • unstyled item
    
<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.

  • item
  • item
  • item
    
<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.

  • item 1
  • item 2
  • item 3
    
<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.

Term
The definition
Term
The definition
Term
The definition
    
<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.

  • policy name
    Web App Backup Policy
  • total storage
    7.7GB
  • frequency
    24 hours
  • simple backup
  • retention
    5 days
    
<ul class="list-info">
  <li>
    <div class="info-label">name</div>
    <div class="info-value">value</div>
  </li>
</ul>
    
  
anchor link to top of page