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.

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).

Use contextual classes to style list items with a stateful background and color.

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s.

• First checkbox
• Second checkbox
• Third checkbox
• Fourth checkbox
• Fifth checkbox

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

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.

Add .active to a .list-group-item to indicate the current active selection.

Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

• An active item
• A disabled item
• A third item
• A fourth item
• And a fifth one

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

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

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.