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.
Primary 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 & Classes
| Variant | Description |
|---|---|
| Flush List Group | Removes outer borders and rounded corners for edge-to-edge rendering inside parent containers like cards. |
| Horizontal List Group | Displays items in a horizontal row instead of vertically. Supports responsive breakpoints. |
| Numbered List Group | Automatically prepends sequential numbers to each item using CSS counters. |
| Actionable List Group | Uses <a> or <button> elements as list items, enabling hover and active states for clickable lists. |
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.
- Shipped 12
- Processing 4
- Cancelled 1
- Pending 8
Numbered Actionable List Group
A numbered list group with clickable items and secondary text, suitable for ranked content or step-based flows.
-
Step 1Set up your accountEnter your email and create a secure password to get started.
-
Step 2Choose a templateBrowse our gallery and pick a design that fits your brand.
-
Step 3Customise & publishEdit colours, text, and images, then publish your site in one click.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.