List Groups

List Groups

List groups provide structured collections of related items with active, disabled, contextual, and actionable states.

Core concept

Explain list-group, list-group-item, active/disabled states, flush lists, links and buttons, and badges within items.

Using it in a real interface

Build a settings menu and a notification list. Explain when list-group is more appropriate than a plain ul and when a normal semantic list with custom spacing is preferable.

Implementation notes

Do not use disabled styling as a substitute for explaining why an action cannot be performed. Users should understand the state where it matters.