Reference
Reference

Styling Lists

Various classes that can be used to modify the look of list items. Many of these can be used together for added variety.

Standard Ordered List

Example:

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

Code:


<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

Standard Unordered List

Example:

  • List item
  • List item
  • List item

Code:


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

Nth List

Styles even (2, 4, 6…) numbered list items with a background – great for improving legibility on longer lists.

Example:

  • List item
  • List item
  • List item
  • List item
  • List item

Code:


<ul class="nth">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Flush List

Removes the list style type and any left padding so the list is flushed to the left – great for displaying lists in tight spaces.

Example:

  • List item
  • List item
  • List item

Code:


<ul class="flush">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Combining Flush & Nth

An ‘nth’ class list that also uses the ‘flush’ class to remove the list style type (bullet point/number).

Example:

  • List item
  • List item
  • List item

Code:


<ol class="flush nth">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

Row of List Items

Example:

  • List item
  • List item
  • List item

Code:


<ul class="row">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Separated row of List Items

Practically the same as a row of list items but with comma separators.

Example:

  • List item
  • List item
  • List item

Code:


<ul class="sep">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Centering Lists

Example:

  • List item
  • List item
  • List item

Code:


<ul class="center">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Example:

  • List item
  • List item
  • List item

Code:


<div class="center">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

Example:

  • List item
  • List item
  • List item

Code:


<ul class="mobile-center">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Combining Centered & Nth Lists

Example:

  • List item
  • List item
  • List item

Code:


<div class="center">
<ul class="nth">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>