Bootstrap 5 list groups display a series of content items in a flexible container. This page covers 4 list group patterns — basic, with badges, linked and tab navigation — each ready to use.
Quick Setup
List groups need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.list-group | Required wrapper element |
.list-group-item | Each list item |
.list-group-item-action | Adds hover/active states for links |
.list-group-item.active | Highlights current item |
.list-group-item.disabled | Grays out an item |
.list-group-flush | Removes borders and rounded corners |
.list-group-numbered | Auto-numbers list items |
.list-group-horizontal | Displays items inline |
data-bs-toggle="list" | Enables tab-style switching |
1. Basic Bootstrap 5 List Group
Simple list group with active, disabled and contextual color variants.
2. Bootstrap 5 List Group with Badges
List items with count badges aligned to the right using d-flex justify-content-between.
3. Bootstrap 5 Linked List Group
Clickable list group with hover and active states using anchor tags instead of li elements.
4. Bootstrap 5 List Group as Tabs
List group used as a vertical tab navigation with content panels on the right.
Frequently Asked Questions
Add the active class to the list-group-item: <li class='list-group-item active'>. For linked list groups add active to the anchor tag. To update active state with JavaScript: remove active from all items then add it to the clicked one.
Use the list-group with form-check inside each item: <li class='list-group-item'><input class='form-check-input me-2' type='checkbox'><label>Item</label></li>. Or use the input-group style list group: each li contains a label wrapping both the checkbox and text.
Add list-group-numbered to the ul element: <ul class='list-group list-group-numbered'>. Bootstrap automatically adds CSS counters to number each list item. Combine with list-group-item-action for clickable numbered lists.
Add list-group-flush to the ul element: <ul class='list-group list-group-flush'>. This removes the outer border and rounded corners, making the list blend into its parent container. Useful inside cards and side panels.
Add list-group-horizontal to make items display inline: <ul class='list-group list-group-horizontal'>. Use list-group-horizontal-md to only go horizontal from the md breakpoint up, stacking vertically on mobile.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.