List

Unordered

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Ordered

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

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul class="unstyled">
  <li>...</li>
</ul>

Inline

Place all list items on a single line with display: inline-block; and some light padding.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul class="inline">
  <li>...</li>
</ul>

Grid

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul class="grid two">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Description

A list of terms with their associated descriptions.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Group

Basic example

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="group">
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li class="disabled">Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Linked items

Cras justo odio Dapibus ac faciasis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="group">
  <a href="#" class="active">Cras justo odio</a>
  <a href="#">Dapibus ac faciasis in</a>
  <a href="#" class="disabled">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Labels

• 14 Cras justo odio
• 2 Dapibus ac facilisis in
• 1 Morbi leo risus

<ul class="group">
  <li><span class="label">14</span> Cras justo odio</li>
  <li><span class="label">2</span> Dapibus ac facilisis in</li>
  <li><span class="label">1</span> Morbi leo risus</li>
</ul>

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros

Cras justo odio Dapibus ac faciasis in Morbi leo risus Porta ac consectetur ac

<ul class="group">
  <li class="success">Dapibus ac facilisis in</li>
  <li class="info">Cras sit amet nibh libero</li>
  <li class="warning">Porta ac consectetur ac</li>
  <li class="danger">Vestibulum at eros</li>
</ul>
<div class="group">
  <a href="#" class="success">Cras justo odio</a>
  <a href="#" class="info">Dapibus ac faciasis in</a>
  <a href="#" class="warning">Morbi leo risus</a>
  <a href="#" class="danger">Porta ac consectetur ac</a>
</div>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="group">
  <a href="#" class="active">
    <h4 class="heading">List group item heading</h4>
    <p class="text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>