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

					
<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

					
<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

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

					

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

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

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