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

Alternative scheme color

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.

Custom content

Adding a footer list

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

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

				
// 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>