Bootstrap List Groups

Bootstrap List Groups Overview

A .list-group wraps a series of .list-group-item elements, applying consistent borders, padding, and spacing. Items can become interactive links or buttons by using anchor or button elements instead of plain list items, which automatically adds hover and focus styling.

List groups support contextual color classes for status, .active and .disabled states, badges for counts, and a .list-group-flush modifier that removes outer borders, making the list blend seamlessly inside a card.

Bootstrap List Groups Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    Inbox
    <span class="badge bg-light text-dark float-end">12</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action">Sent</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Archived</a>
  <div class="list-group-item list-group-item-danger">Trash — 3 items will be deleted in 24h</div>
</div>

The first item is both active and interactive, showing a highlighted state with a count badge floated to the right. The second item is a standard interactive link, the third is disabled, and the final item uses a contextual danger class to draw attention without being clickable.

Top 10 Bootstrap List Groups Examples

These are the list group patterns you'll use to build menus, feeds, and structured content lists.

Popular Real-World Bootstrap List Groups Examples

These list group patterns show up in inboxes, settings menus, and content feeds.

Best Practices

• Use anchor or button elements for list-group-item entries that are actually clickable.
• Add aria-current="true" on the currently active item for accessibility.
• Use list-group-flush when embedding a list inside a card to avoid doubled borders.
• Use list-group-numbered for sequential steps instead of manually adding numbers in text.
• Reserve contextual color classes for status that genuinely needs highlighting.
• Use flex utilities inside list-group-item to align labels and values or badges.
• Keep list items focused on one piece of content each for scannability.

Common Mistakes

• Using plain <li> elements for clickable rows instead of anchor-based list-group-item-action entries.
• Forgetting aria-current on the active item, leaving assistive technology without context.
• Applying list-group-flush outside of a card, where the removed border can look unintentional.
• Overusing contextual color classes until the list loses visual hierarchy.
• Not handling long text content, letting badges or secondary text wrap awkwardly.
• Mixing horizontal and vertical list groups inconsistently across similar UI sections.

Key Takeaways

• list-group and list-group-item are the foundation for styled, structured lists.
• Interactive items use anchors or buttons combined with list-group-item-action.
• Contextual classes and badges highlight status or counts within list items.
• list-group-flush integrates cleanly with cards by removing outer borders.
• list-group-numbered and list-group-horizontal cover sequential and inline layouts.