List groups

Lists are a collection of small amounts of information that the user should see in a single page. Lists are a good alternative to tables/grids, as the most important information is clearly emphasized using different visual approaches. Read more about lists in the UX Guidelines.

Use when

To display small amounts of data in a structured way and the need for filtering and sorting is low
To give the user an overview of a set of alternatives

Design

Default list group

The most basic list group is simply an unordered list with items.

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

					

<ul class="list-group">
    <li class="list-group-item list-group-title">List group Header</li>
    <li class="list-group-item">List item</li>
    <li class="list-group-item active">Selected list item</li>
</ul>

Primary list group

There is a alternative background color, it just need .list-group-primary class along with the default class of the list group main wrapper .list-group

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

					

<ul class="list-group list-group-primary">
    <li class="list-group-item list-group-title">List group Header</li>
    <li class="list-group-item">List item</li>
    <li class="list-group-item active">Selected list item</li>
</ul>

Group list with interactions

Linkify list group items by using anchor tags - <a> - instead of list items, that also means using a parent <div> instead of an <ul>. No need for individual parents around each element.

Default

Cras justo odio

Dapibus ac facilisis in Disabled list item Selected list item Vestibulum at eros

					

<div class="list-group" role="list">
    <div class="list-group-item list-group-title">List group Header</div>
    <a role="listitem" class="list-group-item">List item</a>
    <a role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true">Disabled list item</a>
    <a role="listitem" class="list-group-item active">Selected list item</a>
</div>

Primary

Cras justo odio

Cras justo odio Disabled list item Morbi leo risus Selected list item Vestibulum at eros

					

<div class="list-group list-group-primary" role="list">
    <div class="list-group-item list-group-title">List group Header</div>
    <a role="listitem" class="list-group-item">List item</a>
    <a role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true">Disabled list item</a>
    <a role="listitem" class="list-group-item active">Selected list item</a>
</div>

Options

Badges

Add badges to any list group item and it will automatically be positioned on the right.

By adding .badge-nopill class to the badge element will remove the pill efect for alternative/blue list group.

21Cras justo odio
9Cras justo odio
4Disabled list item
Morbi leo risus1
7Selected list item
Vestibulum at eros3

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 7Selected list item Vestibulum at eros473,00 SEK

					

<ul class="list-group list-group-primary">
    <li class="list-group-item list-group-title">
        List group Header
        <span class="badge">21</span>
    </li>
    <li class="list-group-item">
        List item
        <span class="badge">3</span>
    </li>
    <li class="list-group-item active">
        <span class="badge">7</span>
        Selected list item
    </li>
    // adding .badge-nopill class will remove the pill effect for the badge
    <li class="list-group-item">
        List item
        <span class="badge badge-nopill">
            <b>1.971,51</b>
            SEK
        </span>
    </li>
    ...
</ul>

Custom content

Adding footer to your list:

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

					

<div class="list-group" role="list">
    <div class="list-group-item list-group-title">List group Header</div>
    <a role="listitem" class="list-group-item">List item</a>
    ...
    <div class="list-group-item list-group-footer">
        Vestibulum maximus
        <span class="badge">
            <b>5.671,00</b>
            SEK
        </span>
    </div>
</div>

Alternative header for basic list group, add .list-group-header class to the .list-group-title element.

List group Header 21

Dapibus ac facilisis in 9 Disabled list item 8 Porta ac consectetur ac Active state for last list item

					

<div class="list-group" role="list">
    <div class="list-group-item list-group-title list-group-header">
        List group Header
        <span class="badge">21</span>
    </div>
    <a role="listitem" class="list-group-item">Dapibus ac facilisis in</a>
    <a role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true">
        Disabled list item
        <span class="badge">21</span>
    </a>
    <a role="listitem" class="list-group-item active">Selected list item</a>
    ...
</div>

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

21 Cras justo odio

					

<ul class="list-group">
    <li class="list-group-item list-group-title">List group Header</li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">
            List group item heading
        </h4>
        <p class="list-group-item-text">
            Donec id elit non mi porta gravida at eget metus.
        </p>
    </li>
    ...
    <li class="list-group-item">
        <div class="list-group-item-heading">
            List group item heading
        </div>
        <div class="list-group-item-text" role="listitem">
            Donec id elit non mi porta gravida at eget metus.
        </div>
    </li>
    ...
</ul>