Welcome to The Coding College! In today’s tutorial, we’ll explore List Groups in Bootstrap 5, one of the most versatile components for displaying lists of content. From basic lists to fully interactive components, Bootstrap 5 offers a wide range of options to make your lists stand out.
What Are List Groups in Bootstrap 5?
A List Group is a structured way to display a collection of items. It’s perfect for menus, notifications, action lists, and any content that requires an organized and visually appealing format. Bootstrap 5 enhances list groups with responsive design, interactivity, and customization.
Basic List Group
The simplest list group is created using the .list-group class on an unordered list (<ul>) and the .list-group-item class on each list item (<li>).
Example: Basic List Group
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>Output:
A clean and structured vertical list.
List Groups with Links and Buttons
1. List Group as Links
Transform your list items into clickable links by using <a> tags with the .list-group-item class.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Home</a>
<a href="#" class="list-group-item list-group-item-action">About</a>
<a href="#" class="list-group-item list-group-item-action">Contact</a>
</div>2. List Group as Buttons
Similarly, you can use <button> elements to create interactive lists.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">Option 1</button>
<button type="button" class="list-group-item list-group-item-action">Option 2</button>
<button type="button" class="list-group-item list-group-item-action">Option 3</button>
</div>Customizing List Groups
Bootstrap 5 provides several customization options, such as colors, badges, and contextual styles.
1. Contextual Colors
Add color to your list group items using .list-group-item-* classes, such as .list-group-item-primary or .list-group-item-success.
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary Item</li>
<li class="list-group-item list-group-item-success">Success Item</li>
<li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>2. Active and Disabled States
Use the .active class to highlight an active item and the .disabled class to disable a list item.
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Active Item</li>
<li class="list-group-item">Regular Item</li>
<li class="list-group-item disabled" aria-disabled="true">Disabled Item</li>
</ul>Adding Badges to List Groups
You can attach badges to list items to display counts or additional information. Use the .badge class inside a <span>.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Drafts
<span class="badge bg-success rounded-pill">4</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Trash
<span class="badge bg-danger rounded-pill">7</span>
</li>
</ul>Horizontal List Groups
Transform your list group into a horizontal layout using the .list-group-horizontal class. This works best on larger screens.
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>For responsive layouts, use classes like .list-group-horizontal-sm, .list-group-horizontal-md, or .list-group-horizontal-lg.
Flush List Groups
Remove the borders and padding around list items using the .list-group-flush class.
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>Using List Groups with Cards
Combine list groups with Bootstrap cards for a polished look.
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Interactive List Groups with JavaScript
Bootstrap 5 enables interactive list groups with JavaScript. Use data-bs-toggle="list" to switch between tabs or panes.
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel">Home content</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel">Profile content</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel">Messages content</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel">Settings content</div>
</div>Accessibility Best Practices
- Keyboard Navigation: Ensure list items can be focused and navigated using the Tab key.
- Aria Roles: Use ARIA attributes like
aria-current,aria-disabled, androle="tab"to enhance accessibility. - Hidden Content: Ensure visually hidden elements (e.g., badges) provide meaningful context for screen readers.
FAQs About Bootstrap 5 List Groups
Q1: Can I nest list groups?
Yes, you can nest list groups by placing a new list group inside a list item.
Q2: How do I create a dynamic list group?
Use JavaScript or a framework like React or Angular to render list items dynamically based on data.
Conclusion
Bootstrap 5 List Groups are a powerful way to create structured and interactive lists for your web applications. With options for customization, interactivity, and integration, they’re perfect for building menus, navigation, or action lists.