List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Active & Disabled items
.active to a
.list-group-item to indicate the current active selection.
.disabled to a
.list-group-item to make it appear disabled. Note that some elements with
.list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
Use contextual classes to style list items with a stateful background and color.
Contextual classes also work with
.list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the
.active state; apply it to indicate an active selection on a contextual list group item.