Bootstrap 5 List Groups
Display complex lists with custom content all with a distict style and function.
In Bootstrap, list groups is a component that styles unordered lists in a particular way. This paves the way for creating more complex lists with custom content, without getting bogged down with presentation issues.
Create a Default List Group
To create a default list group, apply the .list-group class to the <ul> tag, and the .list-group-item to each <li> tag.
Badges
You can add badges to list groups. You can align them with the other content using classes like justify-content-between (which translates into justify-content: space-between).
Linked List Groups
You can use Bootstrap 5's .list-group-item-action to for linked list items. Linked list items result in the whole item being clickable (not just the text portion). The whole list item receives a "hover" style too.
To create a linked list group, swap the <ul> tag for a <div> tag and the <li> tags for <a> or button.
You can also use Bootstrap's .active class to highlight a list item as the current one.
Buttons
You can also use buttons instead of links. Just use button tags for the .list-group-item/.list-group-item-action classes.
Disabled Items
You can also apply Bootstrap's .disabled class to a .list-group-item to make it appear disabled.
Contextual Classes
You can also apply Bootstrap's contextual classes to list group items. To do this, add one of the .list-group-item-* classes to the list group item.
When an item is .active its contextual class appears in a darkened version.
Custom Content
List groups can contain other HTML elements too. And you can make it all clickable if it's nested inside a <a> element.
Bootstrap 5 has the .list-group-item-heading class for headings and the .list-group-item-text class for text.