List group
A container that stacks rows on one shared rounded surface.
Basic
Add .list-group to the wrapper and drop .list-group__item rows inside. The item is a plain flex row for simple content, so compose it freely and push a trailing value to the end with a utility such as .ms-auto. The container owns the frame and draws a divider between rows, so each row sits flush while the end rows round to the container corners. A leading icon lines up on its own. Any list element works (<ul>, <ol>, or a <div>).
Seamless
Add .list-group--seamless to drop the outer frame and radius while keeping the dividers. Reach for it when the list sits inside something that already owns a frame, such as a card body, a drawer, or a popover, so the rows blend into the parent surface.
Media rows
When a row needs more than a line of text, use a .media object instead of a plain item. It carries a leading glyph, a title and helper line, and a trailing action, and the container flattens and divides it the same way. Dropped as a direct child of a .card, the list group sheds its own outer chrome and the card owns the frame.
Single choice
Give each row .media--selectable and wrap it in a <label> around a native .radio, and the whole list becomes a choice group. The selected row fills and rings in the accent color; where two selected rows sit next to each other, their borders collapse into a single shared divider.
Multiple choice
Swap the radio for a .checkbox and the same selectable rows take many selections at once. A row whose control is disabled dims and stops responding while the rest stay live.
Horizontal
Use .list-group--horizontal to lay rows side by side; the divider moves from the row top to the row start. Pair it with .media--vertical rows for a divided metric strip. Add a breakpoint suffix (-sm through -2xl) to switch to the row layout only above that width.
Customization
These variables retune .list-group. Override on the root or any wrapper. To keep the frame but drop the rules between rows, set --list-group-divider-color to transparent. Row internals belong to the media component, so reach for the --media-* variables to restyle the rows themselves.
| Variable | Use |
|---|---|
--list-group-bg | Frame background |
--list-group-border-color | Outer frame border color |
--list-group-border-width | Outer frame border thickness |
--list-group-radius | Outer corner radius; the end rows round to match |
--list-group-divider-color | Rule between adjacent rows |
--list-group-item-gap | Gap between parts of a plain item row |
--list-group-item-icon-size | Size of a leading icon in a plain item row |
--list-group-item-padding-block | Row vertical padding |
--list-group-item-padding-inline | Row horizontal padding |
--list-group-item-bg-active | Fill of the current or selected row |
--list-group-item-disabled-opacity | Dimming applied to a disabled row |