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

Basic/default example

The most basic list group is simply an unordered list with list items, and the proper classes.

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

Alternative color example

There is a alternative background color version, 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

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 scheme color

Cras justo odio

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

Alternative scheme color

Cras justo odio

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

Options

Badges

Add the badges component 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

Custom content

Adding a footer 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

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

Cras justo odio 21

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

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

21 Cras justo odio

				
// Basic List Group
<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>


// Alternative color List Group
<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>
    ...
</ul>


// Interactive List Group
<div class="list-group">
    <div class="list-group-item list-group-title">List group Header</div>
    <a class="list-group-item">list item</a>
    ...
</div>


// Badges in List Group
<ul class="list-group">
    <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>


// Alternative header for basic List Group
<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>
    ...
</ul>


// Adding footer section to List Group
<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>
    ...
    // Badges in List Group
    <li class="list-group-item list-group-footer">List group footer section</li>
</ul>


// Adding "any" html content to List Group
<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">
            Donec id elit non mi porta gravida at eget metus.
        </div>
    </li>
    ...
</ul>