List Styles

Bootstrap provides several classes to style lists differently from their browser defaults.

Unstyled List

<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Removes bullets and left padding from the list.

Inline List

<ul class="list-inline">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

Displays list items horizontally in a line — great for navigation links.

List Groups

<ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
</ul>

List Groups with Badges

<ul class="list-group">
    <li class="list-group-item">
        Inbox <span class="badge">14</span>
    </li>
    <li class="list-group-item">
        Sent <span class="badge">3</span>
    </li>
</ul>

Linked List Groups

<div class="list-group">
    <a href="#" class="list-group-item active">Active item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
</div>

Contextual List Items

<ul class="list-group">
    <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-info">Info</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
    <li class="list-group-item list-group-item-danger">Danger</li>
</ul>

Description Lists

<dl class="dl-horizontal">
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>