lists

Lists

By default, ul ol and dl have some basic styling. There's also a couple of classes with which to extend these to make them more versatile.

Default lists
  • List item 1
  • List item 2
  • List item 3

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

List item 1 title
List item 1 definition
List item 2 title
List item 2 definition
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<hr>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<hr>
<dl>
  <dt>List item 1 title</dt>
  <dd>List item 1 definition</dd>
  <dt>List item 2 title</dt>
  <dd>List item 2 definition</dd>
</dl>
Unstyled lists
  • List item 1
  • List item 2
  • List item 3
<ul class="list-unstyled">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
Condensed lists
  • List item 1
  • List item 2
  • List item 3
<ul class="list-condensed">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
Inline list

Inline list

  • List item 1
  • List item 2
  • List item 3
<h2 class="h4">Inline list</h2>
<ul class="list-inline">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
Nav List

Used with .list-inline. Forces inline list items to become full-width blocks on XS viewports. This is typically useful in navigation bars to give a better mobile experience.

Nav list

Extend `.list-inline` with `.list-nav` to force inline list items to change to full-width blocks at the mobile breakpoint.

  • List item 1
  • List item 2
  • List item 3
<h2 class="h4">Nav list</h2>
<p>Extend `.list-inline` with `.list-nav` to force inline list items to change to full-width blocks at the mobile breakpoint.</p>
<ul class="list-inline list-nav">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Customizing lists

Overwrite these variables in _custom_variables.scss to change these defaults.

$list-pad: 1.5rem !default;
$list-inline-gutter: 1rem !default;