List groups

An in-page list pattern using .list-group. For the dropdown popup pattern, see Dropdown lists.

Default list group

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

Example
HTML

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

development/documentation/docs/list-groups/examples/basic-list-group.html

<ul class="list-group col-xxl-5 col-xl-8">
	<li class="list-group-item list-group-title">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item active">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</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.

Cras justo odio

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

development/documentation/docs/list-groups/examples/basic-anchor-list-group.html

<div class="list-group col-xxl-5 col-xl-8" role="list">
	<div class="list-group-item list-group-title">Cras justo odio </div>
	<a href="#!" role="listitem" class="list-group-item">Dapibus ac facilisis in</a>
	<a href="#!" role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true">Disabled list item</a>
	<a href="#!" role="listitem" class="list-group-item active">Selected list item</a>
	<a href="#!" role="listitem" class="list-group-item">Vestibulum at eros</a>
</div>

Options

Badges

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

Example
HTML

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

development/documentation/docs/list-groups/examples/basic-badges-list-group.html

<ul class="list-group col-xxl-5 col-xl-8">
    <li class="list-group-item list-group-title"><span class="badge">21</span>Cras justo odio</li>
    <li class="list-group-item"><span class="badge">9</span>Cras justo odio</li>
    <li class="list-group-item disabled" tabindex="-1" aria-disabled="true"><span class="badge">4</span>Disabled list item</li>
    <li class="list-group-item">Morbi leo risus<span class="badge">1</span></li>
    <li class="list-group-item active"><span class="badge">7</span>Selected list item</li>
    <li class="list-group-item">Vestibulum at eros<span class="badge">3</span></li>
</ul>

Custom content

Adding a footer to your list:

Example
HTML

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

development/documentation/docs/list-groups/examples/footer-list-group.html

<div class="list-group col-xxl-5 col-xl-8" role="list">
    <div class="list-group-item list-group-title"><span class="badge">21</span>Cras justo odio</div>
    <a href="#!" role="listitem" class="list-group-item"><span class="badge">9</span>Cras justo odio</a>
    <a href="#!" role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true"><span class="badge">4</span>Disabled list item</a>
    <a href="#!" role="listitem" class="list-group-item">Morbi leo risus<span class="badge">1</span></a>
    <a href="#!" role="listitem" class="list-group-item active"><span class="badge"><b>1.971,51</b> SEK</span>Selected list item</a>
    <a href="#!" role="listitem" class="list-group-item">Vestibulum at eros<span class="badge"><b>473,00</b> SEK</span></a>
    <div class="list-group-item list-group-footer">
        <span class="badge"><b>5.671,00</b> SEK</span>
        Vestibulum maximus
    </div>
</div>

Alternative headers

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

Example
HTML

List group Header 21

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

development/documentation/docs/list-groups/examples/alternative-headers-list-group.html

<div class="list-group col-xxl-5 col-xl-8" role="list">
    <div class="list-group-item list-group-title list-group-header">
        List group Header
        <span class="badge">21</span>
    </div>
    <a href="#!" role="listitem" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#!" role="listitem" class="list-group-item disabled" tabindex="-1" aria-disabled="true">
        <span class="badge">9</span>
        Disabled list item
    </a>
    <a href="#!" role="listitem" class="list-group-item">
        <span class="badge">8</span>
        Porta ac consectetur ac
    </a>
    <a href="#!" role="listitem" class="list-group-item active">Active state for last list item</a>
</div>

Custom HTML

Add nearly any HTML inside list items, even for linked list groups.

Example
HTML

21 Cras justo odio

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.

development/documentation/docs/list-groups/examples/custom-html-list-group.html

<div class="list-group col-xxl-5 col-xl-8" role="list">
    <div class="list-group-item list-group-title">
        <span class="badge">21</span>
        Cras justo odio
    </div>
    <a href="#!" role="listitem" class="list-group-item active">
        <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. Maecenas sed diam eget risus varius blandit.</p>
    </a>
    <a href="#!" role="listitem" 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. Maecenas sed diam eget risus varius blandit.</p>
    </a>
    <a href="#!" role="listitem" 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. Maecenas sed diam eget risus varius blandit.</p>
    </a>
</div>