Lists
Unordered List
A list of items in which the order does not explicitly matter.
- item
- item
- item
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
Ordered List
A list of items in which the order does explicitly matter.
- item 1
- item 2
- item 3
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
Unstyled List
Remove the default list-style and left margin on list items by applying .list-unstyled
to the list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- unstyled item
- unstyled item
- nested list item
- nested list item
- nested list item
- unstyled item
<ul class="list-unstyled">
<li>unstyled item</li>
<li>unstyled item
<ul>
<li>nested list item</li>
<li>nested list item</li>
<li>nested list item</li>
</ul>
</li>
<li>unstyled item</li>
</ul>
Inline List
Place all list items on a single line by applying .list-inline
to the list.
- item
- item
- item
<ul class="list-inline">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
Description List
A description list is a list of terms, with a description of each term.
- Term
- The definition
- Term
- The definition
- Term
- The definition
<dl>
<dt>Term</dt>
<dd>The definition</dd>
<dt>Term</dt>
<dd>The definition</dd>
<dt>Term</dt>
<dd>The definition</dd>
</dl>
List Info
This pattern is useful for displaying name—value pairs. Use .list-info
on an <ul>
, and wrap the label in .info-label
and value in .info-value
.
-
policy nameWeb App Backup Policy
-
total storage7.7GB
-
frequency24 hours
-
retention5 days
<ul class="list-info">
<li>
<div class="info-label">name</div>
<div class="info-value">value</div>
</li>
</ul>