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

• Active
• Disabled
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

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} to make a list group horizontal starting at that breakpoint’s min-width.

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

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

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

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

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

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.

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

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1