Lists

General lists

Types of lists

Three primary types of lists exist:

ordered list

lists where the order is important

unordered list

lists whose order is not specific

definition list

list of terms and their definitions

Nesting lists

Ordered and unordered lists may be nested. Content that has more than one nested list may mean the content is more complex and needs to be broken down in another way.

Ordered lists

Ordered lists are numbered (default) or alphabetized. Use them to present steps, directions, or content that is read or done in a specific order. This type of content is less common.

Numerical-based style

By default, ordered lists are numerical and start at 1.

<ol>
 <li>Gather ingredients</li>
 <li>Mix ingredients together in a bowl</li>
 <li>Bake at 450°F for 20 minutes</li>
 <li>Cool before serving</li>
</ol>

Alphabetical or outline style

<ol type="A">
 <li>Introduction paragraph</li>
 <li>Argument 1
  <ol type="i">
   <li>Evidence 1 for argument 1</li>
   <li>Evidence 2 for argument 1</li>

  </ol>
 </li>
 <li>Argument 2
  <ol type="i">
   <li>Evidence 1 for argument 2</li>
   <li>Evidence 2 for argument 2</li>
  </ol>
 </li>
</ol>

Unordered lists

Unordered lists are by default represented with bullets, and are most commonly used.

<ul>
 <li>Database 1</li>
 <li>Database 2
  <ul>
   <li>Note 1</li>
   <li>Note 2</li>
  </ul>
 </li>
 <li>Database 3</li>
</ul>

Description lists

Description lists are appropriate for a list of terms and their corresponding definitions, or a key-value style pairing. A definition term may have more than one definition. Description lists are used sparingly.

<dl>
 <dt>Position</dt>
 <dd>Business analyst</dd>
 <dt>Location</dt>
 <dd>Building 1, Room 3</dd>
 <dt>Hours</dt>
 <dd>Available daily during business hours</dd>
</dl>

Horizontal definition list

<dl class="dl-horizontal">
 <dt>Position</dt>
 <dd>Business analyst</dd>
 <dt>Location</dt>
 <dd>Building 1</dd>
 <dd>Room 3</dd>
 <dt>Hours</dt>
 <dd>Available daily during business hours</dd>
</dl>

List group

List groups style a list with extra padding and borders. They are made with an unstyled (the bullet is removed) unordered list. Removing the list styling also affects how some assistive technology understands the content (it may not read it out as a list group).

Default group

When any type of content may be in a group, the default stylings are recommended. If used similar to a menu, adding aria-current="list-item" to the active item is also recommended.

<ul class="list-group">
 <li>Database 1</li>
 <li aria-current="list-item">Database 2</li>
 <li disabled>Database 3</li>
</ul>

Embedded list groups

Additional option to be used in conjunction with list-group.

When a list group is within another component, primarily cards, using list-inline will remove the left, right, and bottom borders, as well as bottom margin and padding, so the list group fits snuggly within the encompassing component.

<ul class="list-group list-inline">
<li>Database 1</li>
<li aria-current="list-item">Database 2</li>
<li disabled>Database 3</li>
</ul>

Striped-style list groups

Striping may be added to any repeatable element, though it is written specifically for use with the .list-group class.

<ul class="list-group striped">
<li>Database 1</li>
<li aria-current="list-item">Database 2</li>
<li disabled>Database 3</li>
</ul>

Groups of links

Additional option to be used in conjunction with list-group.

Often, a list group is used to present a list of links alone, without mixed content such as paragraph text. Adding list-links expands the anchor element to fill the entire padded space of a list item to provide a more convenient interactive zone.

<ul class="list list-links">
 <li><a href="//data.ba.se">Database 1</a></li>
 <li><a href="//data.ba.se">Database 2</a></li>
 <li><a href="//data.ba.se">Database 3</a></li>
</ul>