Bootstrap List Group: Examples for Every Use

A Bootstrap list group is a bordered, stacked list of items: a settings menu, a list of messages, a to-do list with checkboxes, or a set of links in a sidebar. This guide covers every list group pattern in Bootstrap 5.3: active and disabled items, links and buttons, flush and horizontal lists, numbered lists, colors, badges, custom content, checkboxes, and list groups that switch tabs.

A basic list group

<ul class="list-group">
  <li class="list-group-item">Dashboard</li>
  <li class="list-group-item">Orders</li>
  <li class="list-group-item">Customers</li>
  <li class="list-group-item">Settings</li>
</ul>

.list-group removes the bullets and padding, and each .list-group-item gets padding and a shared border. No JavaScript is needed.

Active and disabled items

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Dashboard</li>
  <li class="list-group-item">Orders</li>
  <li class="list-group-item disabled" aria-disabled="true">Reports (coming soon)</li>
</ul>

.active uses the primary color. Add aria-current="true" so screen readers know which item is current.

Links and buttons

Use <a> or <button> items with .list-group-item-action to get a hover and focus state. The container becomes a <div>:

<div class="list-group">
  <a href="/account" class="list-group-item list-group-item-action active" aria-current="true">Account</a>
  <a href="/billing" class="list-group-item list-group-item-action">Billing</a>
  <a href="/team" class="list-group-item list-group-item-action">Team</a>
  <button type="button" class="list-group-item list-group-item-action">Log out</button>
</div>

For a disabled button, use the disabled attribute. For a disabled link, add .disabled and aria-disabled="true". This pattern makes a good settings menu inside a sidebar.

Flush list groups

.list-group-flush removes the outer borders and rounded corners, so the list sits edge to edge inside a card:

<div class="card">
  <div class="card-header">Recent activity</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Invoice #1043 paid</li>
    <li class="list-group-item">New customer signed up</li>
    <li class="list-group-item">Export finished</li>
  </ul>
</div>

More card layouts are in the cards guide.

Numbered list groups

Add .list-group-numbered to an <ol>. The numbers come from a CSS counter:

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Create an account</li>
  <li class="list-group-item">Choose a template</li>
  <li class="list-group-item">Publish your site</li>
</ol>

Horizontal list groups

.list-group-horizontal lays the items out in a row. Add a breakpoint to stack them on phones and line them up from that width:

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Free</li>
  <li class="list-group-item">Pro</li>
  <li class="list-group-item">Team</li>
</ul>

The options are list-group-horizontal, -sm, -md, -lg, -xl, and -xxl. Horizontal list groups can’t be combined with list-group-flush. Add flex-fill to each item for equal widths.

Colors

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Backup completed</li>
  <li class="list-group-item list-group-item-warning">Certificate expires in 14 days</li>
  <li class="list-group-item list-group-item-danger">Payment failed</li>
  <li class="list-group-item list-group-item-primary">New version available</li>
</ul>

Every theme color works: primary, secondary, success, danger, warning, info, light, and dark. They use the subtle colors, so they adapt in dark mode. Don’t rely on color alone to carry the meaning: keep it in the text too.

List group with badges

Use flex utilities to push a badge to the right:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Drafts
    <span class="badge text-bg-secondary rounded-pill">2</span>
  </li>
</ul>

Custom content

Any HTML fits inside an item, so a list group can show messages, files, or search results:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Your invoice is ready</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Invoice #1043 for November is available to download.</p>
    <small class="text-body-secondary">Billing</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">New comment</h5>
      <small class="text-body-secondary">5 days ago</small>
    </div>
    <p class="mb-1">Sam replied to your post about the pricing page.</p>
  </a>
</div>

List group with checkboxes

Put a checkbox and label in each item. Adding .stretched-link to the label makes the whole row clickable:

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="" id="task1">
    <label class="form-check-label stretched-link" for="task1">Write the release notes</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="" id="task2" checked>
    <label class="form-check-label stretched-link" for="task2">Update the pricing page</label>
  </li>
</ul>

Radio buttons work the same way, with the same name on each so only one can be chosen.

List group as tabs

With the JavaScript bundle, a list group can switch content panes like tabs. Use data-bs-toggle="list" on each item and point it at a .tab-pane:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="settings-list" role="tablist">
      <a class="list-group-item list-group-item-action active" id="profile-tab" data-bs-toggle="list" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
      <a class="list-group-item list-group-item-action" id="security-tab" data-bs-toggle="list" href="#security" role="tab" aria-controls="security" aria-selected="false">Security</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile settings...</div>
      <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">Password and two-factor settings...</div>
    </div>
  </div>
</div>

Style list groups

List groups read CSS variables you can override on the element, for example:

.list-group {
  --bs-list-group-active-bg: #6f42c1;
  --bs-list-group-active-border-color: #6f42c1;
  --bs-list-group-item-padding-y: 0.75rem;
  --bs-list-group-border-radius: 0.75rem;
}

To change list groups along with the rest of your theme, open the builder, adjust the colors and corner radius, and export the CSS.

FAQ

What is a list group in Bootstrap?

A list group is a component for showing a series of items in a bordered, stacked list. Add .list-group to a <ul> or <div> and .list-group-item to each item. Items can be links, buttons, or plain content, and no JavaScript is needed except for the tab behavior.

How do I make a clickable list group in Bootstrap?

Use <a> or <button> elements with class="list-group-item list-group-item-action" inside a <div class="list-group">. The list-group-item-action class adds the hover and focus styles.

How do I remove the borders from a Bootstrap list group?

Add .list-group-flush to remove the outer borders and rounded corners. To remove all borders, add border-0 to each item.

How do I make a horizontal list group?

Add .list-group-horizontal to the list, or a responsive version such as .list-group-horizontal-md to stack on small screens and display in a row from 768px.

How do I add a badge to a list group item?

Add d-flex justify-content-between align-items-center to the item, then place a <span class="badge text-bg-primary rounded-pill"> inside it after the text.

How do I change the active color of a list group?

Override --bs-list-group-active-bg and --bs-list-group-active-border-color on .list-group, or change $primary in Sass, since the active item uses the primary color.