A list of items in which the order does not explicitly matter.
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>A list of items in which the order does explicitly matter.
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
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.
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
Place all list items on a single line with display: inline-block; and some light padding.
<ul class="inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul><ul class="grid two">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>A list of terms with their associated descriptions.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec
elit.
</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
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.
<dl class="horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec
elit.
</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.
</dd>
</dl><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><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><ul class="group">
<li>14 Cras justo odio</li>
<li>2 Dapibus ac facilisis in</li>
<li>1 Morbi leo risus</li>
</ul>
Use contextual classes to style list items, default or linked. Also includes .active state.
<div class="grid two">
<div class="column">
<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>
<div class="column">
<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>
</div>
</div>Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
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>
<a href="#" class="disabled">
<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>
<a href="#">
<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>