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.

• An item
• A second item
• A third 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.

1. A list item
2. A list item
3. A 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