Esc

List groups

List groups can be used anywhere to display content, lists or interactive links.

In this article

We use this element in our themes to present call-to-actions, menus and lists of articles.

Usage

Use .list-group to wrap two or more .list-group-item elements to create a list group.

<ul class="list-group">
  <li class="list-group-item">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">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

List groups and their items can contain almost any custom content and HTML.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action is-active">
    <div class="flex w-100 justify-content-between align-items-baseline">
      <h5 class="mt-3 text-inherit">Article title</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="flex w-100 justify-content-between align-items-baseline">
      <h5 class="mt-3">Article title</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="flex w-100 justify-content-between align-items-baseline">
      <h5 class="mt-3">Article title</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

Badges can be added to .list-group-items and aligned using flex utilities.

<ul class="list-group">
  <li class="list-group-item flex justify-content-between align-items-center">
    Open
    <span class="badge">14</span>
  </li>
  <li class="list-group-item flex justify-content-between align-items-center">
    Pending
    <span class="badge">2</span>
  </li>
  <li class="list-group-item flex justify-content-between align-items-center">
    On-hold
    <span class="badge">1</span>
  </li>
</ul>

States

Active

Add .is-active to a .list-group-item to indicate the current active selection.

<ul class="list-group">
  <li class="list-group-item is-active">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">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Disabled

Add .is-disabled to a .list-group-item to make it appear disabled.

<ul class="list-group">
  <li class="list-group-item is-disabled" aria-disabled="true">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">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Some elements with .is-disabled will also require custom JavaScript to disable their click events (e.g., links).

Use <a> or <button> elements with the .list-group-item-action class to create actionable list group items with hover, disabled, and active states.

<div class="list-group">
  <a class="list-group-item list-group-item-action is-active" href="#">Cras justo odio</a>
  <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
  <a class="list-group-item list-group-item-action" href="#">Morbi leo risus</a>
  <a class="list-group-item list-group-item-action" href="#">Porta ac consectetur ac</a>
  <a class="list-group-item list-group-item-action is-disabled" href="#" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

With <button> elements you can make use of the disabled attribute instead of the .is-disabled class.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action is-active">Cras justo odio</button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Variants

Horizontal

Use .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Use the .flex-fill utility class on each list group item to have them occupy the same amount of horizontal space.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item flex-fill text-center">Cras justo odio</li>
  <li class="list-group-item flex-fill text-center">Dapibus ac facilisis in</li>
  <li class="list-group-item flex-fill text-center">Morbi leo risus</li>
</ul>

Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

<ul class="list-group list-group-flush">
  <li class="list-group-item">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">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Questions or feedback about this article? Let us know