Lists

Ordered and unordered lists are styled like this by default:

No list style

Lists can be displayed without bullets or numbers with the .no-list-style modifier class.

<ul class="no-list-style">
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
  <li>Unordered list item 3</li>
</ul>

<ol class="no-list-style">
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
  <li>Ordered list item 3</li>
</ol>

Inline lists

Add the modifier class .inline to display list items inline instead of stacked. List items are displayed with a 20px gutter between them. Note that it is unnecessary to add the .no-list-style class here.

<ul class="inline">
  <li>Inline list item 1</li>
  <li>Inline list item 2</li>
  <li>Inline list item 3</li>
</ul>