How it works
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.
Basic Example
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Active & Disabled items
Add .active, .disabled to a .list-group-item to indicate the current active selection.
- An active item
- A second item
- A third item with A disabled item
- A fourth item
- And a fifth one
Links and buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.
Flush
Add .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).
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Numbered
Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.
- A list item
- A list item
- A list item
-
14SubheadingContent for list item
-
14SubheadingContent for list item
-
14SubheadingContent for list item
With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- A list item 14
- A second list item 2
- A third list item 1
Checkboxes and radios
Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.
- First radio
- Second radio
- Third radio
- Fourth radio
- Fifth radio