Bootstrap List Groups

Basic List Groups

List groups are a flexible and powerful component for displaying a series of content. The most basic list group is an unordered list with list items styled by Bootstrap.

First item
Second item
Third item

To create a basic list group, use a <ul> element with class .list-group, and <li> elements with class .list-group-item:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <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>
    </ul>
  </div>
</body>
</html>

List Group With Badges

You can add badges to any list group item to show unread counts, activity, etc. Use utility classes like .d-flex, .justify-content-between, and .align-items-center on the .list-group-item for proper badge alignment.

New Messages 12
Deleted Items 5
Warnings 3

To create a badge, use a <span> element with class .badge and a background color utility (e.g., .bg-primary). The .rounded-pill class gives it a pill shape.

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="list-group w-50">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      New Messages
      <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Deleted Items
      <span class="badge bg-danger rounded-pill">5</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Warnings
      <span class="badge bg-warning rounded-pill text-dark">3</span>
    </li>
  </ul>
</body>
</html>

List Group With Linked Items

List group items can also be actionable hyperlinks. Use <div> instead of <ul> and <a> tags (or <button>) instead of <li>. Add .list-group-item-action for hover and active states.

First item (active)
Second item
Third item

The .active class indicates the current active selection.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-50">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
      First item
    </a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</body>
</html>

Disabled Item

The following list group has a disabled item:

First item (disabled)
Second item
Third item

To disable an item, add the .disabled class. For <a> tags, also add tabindex="-1" and aria-disabled="true".

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-50">
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">
      First item (disabled)
    </a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</body>
</html>

Contextual Classes

Contextual classes can be used to color list items to provide visual cues.

Success: First item
Info: Second item
Warning: Third item
Danger: Fourth item

Use classes like .list-group-item-success, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, etc.

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="list-group w-50">
    <li class="list-group-item list-group-item-success">Success: First item</li>
    <li class="list-group-item list-group-item-info">Info: Second item</li>
    <li class="list-group-item list-group-item-warning">Warning: Third item</li>
    <li class="list-group-item list-group-item-danger">Danger: Fourth item</li>
    <li class="list-group-item list-group-item-primary">Primary: Fifth item</li>
    <li class="list-group-item list-group-item-secondary">Secondary: Sixth item</li>
    <li class="list-group-item list-group-item-light">Light: Seventh item</li>
    <li class="list-group-item list-group-item-dark">Dark: Eighth item</li>
  </ul>
</body>
</html>

Custom Content

You can add nearly any HTML inside a list group item. Bootstrap 5 encourages using standard HTML elements and utility classes for layout and spacing, like flex utilities (.d-flex, .justify-content-between), heading tags, and paragraph tags.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-75">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
      <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 muted small print.</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">Another list group item</h5>
        <small class="text-muted">1 week ago</small>
      </div>
      <p class="mb-1">More placeholder content here for the second item.</p>
      <small class="text-muted">Additional details.</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">Third item with custom content</h5>
        <small class="text-muted">2 weeks ago</small>
      </div>
      <p class="mb-1">This item demonstrates further customization possibilities.</p>
      <small class="text-muted">Final piece of information.</small>
    </a>
  </div>
</body>
</html>