List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Basic example

Use .list-group and .list-group-item. Add .active or .disabled for states.

Active Item
A second item
A third item
A fourth item
A disabled item

HTML

<!-- Basic list group -->
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Active Item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
</ul>

Flush

Add .list-group-flush to remove the outer borders. Useful within cards.

An item
A second item
A third item

HTML

<!-- Flush list group (no outer borders) -->
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

With badges

Add badges to any list group item to show unread counts, labels, or indicators using flex utilities.

Inbox14
Ads2
Junk1

HTML

<!-- List group with badges -->
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Action items

Use <a> tags with .list-group-item-action for clickable list group items with hover states.

Active link A second link A third link Disabled link

HTML

<!-- Actionable list group (links) -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">A second link</a>
  <a href="#" class="list-group-item list-group-item-action">A third link</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1">Disabled link</a>
</div>