Advertisement
Google Ad Slot: content-top
Bootstrap 5 List Group
List groups in Bootstrap 5 provide a flexible and customizable way to display a series of content, such as navigation links or informational items
Basic Example:
The <ul> element with the .list-group class. Then add the .list-group-item to each <li> element and a .list-group-link class to each link inside <li>
- Item 1
- Item 2
- Item 3
Active and Disabled Items:
Use .active to highlight an item and .disabled to disable it.
- Active Item
- Item 2
- Disabled Item
List Group with Links
Use a elements for clickable list items.
Flush / Remove Borders
Use .list-group-flush for a list group with no borders and a seamless look.
- Item 1
- Item 2
- Item 3
Numbered List Groups
Use .list-group-numbered elements for numbered list items.
- First item
- Second item
- Third item
List Group with Links
Use .list-group-horizontal to align items horizontally. Combine with responsive breakpoints for different layouts.
- Item 1
- Item 2
- Item 3
Responsive
- Item 1
- Item 2
- Item 3
Contextual Classes
Add colors using contextual classes like .list-group-item-primary, .list-group-item-secondary, etc.
- Primary Item
- Success Item
- Danger Item