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
You can add badges to list groups. You can align them with the other content using classes like
justify-content-between (which translates into
Linked List Groups
You can use Bootstrap 4’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.
You can also use Bootstrap’s
.active class to highlight a list item as the current one.
You can also use buttons instead of links. Just use
<button> tags for the
You can also apply Bootstrap’s
.disabled class to a
.list-group-item to make it appear disabled.
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.
List groups can contain other HTML elements too. And you can make it all clickable if it’s nested inside a
Bootstrap 4 has the
.list-group-item-heading class for headings and the
.list-group-item-text class for text.