List group

List groups are useful for displaying a series of content.

Example

First item
Second item
Third item
Fourth item
Fifth item

<ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
    <li class="list-group-item">Fifth item</li>
</ul>

Active items

You can add .list-group to a item in list group to indicate a current state. Make sure to add aria-current="true" so it works with screen readers.

Active item
Second item
Third item
Fourth item
Fifth item

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">Active item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
    <li class="list-group-item">Fifth item</li>
</ul>

Links & buttons

You can use <a> or <button> elements to add links or buttons to a list group.

Unfortunately, <a> doesn't support the disabled attribute.

Active item Second item Third item Fourth item Disabled item

<div class="list-group">
    <a href="#" class="list-group-item active" aria-current="true">Active item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
    <a href="#" class="list-group-item">Fourth item</a>
    <a href="#" class="list-group-item disabled" aria-disabled="true">Disabled item</a>
</div>

<div class="list-group">
    <button type="button" class="list-group-item active" aria-current="true">Active item</button>
    <button type="button" class="list-group-item">Second item</button>
    <button type="button" class="list-group-item">Third item</button>
    <button type="button" class="list-group-item">Fourth item</button>
    <button type="button" class="list-group-item" disabled>Disabled item</button>
</div>