Bootstrap 5 List Group
The Bootstrap 5 List Group is a flexible component for displaying a series of related content, from simple text lists to complex interactive panels. It supports contextual colours, badges, active and disabled states, flush and horizontal layouts, numbered lists, and linked or button-based actionable items.
Bootstrap class
.list-groupCommon use cases
- Displaying a sidebar navigation menu with active-state highlighting for the current page
- Showing a notification or activity feed with badges indicating unread counts
- Rendering a settings panel where each list item links to a configuration sub-page
- Presenting search results or filtered items in a clean, scannable vertical list
- Building a numbered step-by-step checklist for onboarding flows or task completion
Variants and classes
| Variant | Description and classes |
|---|---|
| Flush List Group | Removes outer borders and rounded corners for edge-to-edge rendering inside parent containers like cards.list-group list-group-flush |
| Horizontal List Group | Displays items in a horizontal row instead of vertically. Supports responsive breakpoints.list-group list-group-horizontal |
| Numbered List Group | Automatically prepends sequential numbers to each item using CSS counters.list-group list-group-numbered |
| Actionable List Group | Uses <a> or <button> elements as list items, enabling hover and active states for clickable lists.list-group + list-group-item-action |
Code example
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center active" aria-current="true">
Dashboard
<span class="badge bg-light text-dark rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Messages
<span class="badge bg-primary rounded-pill">3</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Orders
<span class="badge bg-primary rounded-pill">27</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Settings
<span class="badge bg-primary rounded-pill">0</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center disabled" aria-disabled="true">
Archived
<span class="badge bg-secondary rounded-pill">5</span>
</li>
</ul>Live examples
Flush List Group with Contextual Colours
A flush list group inside a card showing items with different contextual background colours for status indication.
Numbered Actionable List Group
A numbered list group with clickable items and secondary text, suitable for ranked content or step-based flows.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas sidebar navigation list group with brand-coloured active state
- Canvas notification feed list group with unread badges and timestamps
- Canvas flush list group inside a card for dashboard stat panels
- Canvas numbered checklist list group for onboarding wizards
Best practices
Combine with badges for data-rich lists
Place a .badge inside each .list-group-item using d-flex justify-content-between align-items-center on the item. This creates a clean layout where the label sits on the left and the count or status badge aligns to the right: ideal for notification counts, order totals, or task statuses.
Use flush variant inside cards
When placing a list group inside a .card, always use the .list-group-flush class. This removes the outer border and border-radius from the list group so it sits flush against the card edges, avoiding double borders and visual inconsistencies.
Add aria-current and aria-disabled for accessibility
Mark the currently active list item with aria-current='true' so screen readers announce it as the active selection. For disabled items, add the disabled class and aria-disabled='true' to ensure assistive technologies communicate the non-interactive state. Avoid using tabindex='-1' alone. Pair it with aria-disabled for full coverage.