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.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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>