The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow,or with your own CSS as needed.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Add .disabledto a .list-group-itemto make it appeardisabled. Note that some elements with .disabledwill also require custom JavaScript to fully disable their click events(e.g.,links).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Add .list-group-flushto remove some borders and rounded corners to render list group items edge-to-edge in a parent container(e.g.,cards).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

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

• Dapibus ac facilisis in
• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group item
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

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

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

Add .activeto a .list-group-itemto indicate the current active selection.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Use <a>s or <button>s to create actionablelist 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.

Be sure to not use the standard .btnclasses here.

Add .list-group-horizontalto 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. Currently horizontal list groups cannot be combined with flush list groups.

ProTip:Want equal-width list group items when horizontal? Add .flex-fillto each list group item.

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

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

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