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

An item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

Active items / actions

The current link item A second link item A disabled link item

<div class="list-group demo-card-md">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Flush

Add .list-group-flush to remove some borders and rounded corners.

An item
A second item
A third item

<ul class="list-group list-group-flush demo-card-md">
  <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>

Numbered

Add .list-group-numbered to display numbered list items.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

<ol class="list-group list-group-numbered demo-card-md">
  <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>
</ol>

Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints, or with a breakpoint suffix like .list-group-horizontal-sm.

An item
A second item
A third item

<ul class="list-group list-group-horizontal-md demo-card-lg">
  <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>

Contextual classes

A simple primary list group item

A simple success list group item

A simple danger list group item

A simple warning list group item

A simple info list group item

<div class="list-group demo-card-md">
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
</div>

Custom content

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

<div class="list-group demo-card-md">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
</div>

Light variant

Use .list-group-light for a borderless item list with rounded hover states (handy in sidebars).

<div class="list-group list-group-light demo-sidebar-list">
  <a href="#" class="list-group-item list-group-item-action active">Dashboard</a>
  <a href="#" class="list-group-item list-group-item-action">Orders</a>
  <a href="#" class="list-group-item list-group-item-action">Customers</a>
</div>