Bootstrap Lists
Creating Lists With Bootstrap
Bootstrap provides three types of lists:
- Unordered lists (<ul>)
- Ordered lists (<ol>)
- Definition lists (<dl>)
Remove Styling From Lists
Sometimes you might need to remove the default styling from lists.
The .list-unstyled class removes the default list-style and the left
padding from list items. This class can be used on both <ul> and <ol>:
Example
<ul class="list-unstyled">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Try it Yourself »
The result will look something like this:
- First item
- Second item
- Third item
Placing The List Items Inline
The .list-inline class places all list items on a single line. This class can be used on both <ul> and <ol>:
Example
<ul class="list-inline">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Try it Yourself »
The result will look something like this:
- First item
- Second item
- Third item
Horizontal Definition Lists
The .dl-horizontal class lines up the terms (<dt>) and descriptions (<dd>) in
<dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side:
Example
<dl class="dl-horizontal">
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »
The result will look something like this:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Complete Bootstrap List Reference
For a complete reference of all list classes, go to our complete Bootstrap List Reference.
