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

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

Add .disabledto a .list-group-itemto gray it out to appear disabled.

Just add an icon before your content to create a list group with icons

• Cupcake sesame snaps dessert marzipan.

• Jelly beans jelly-o gummi bears chupa chups marshmallow.

• Bonbon macaroon gummies pie jelly

Use Utility classes .d-flex.justify-content-betweenalign-items-centerto create space between badge and your content

• Biscuit jelly beans macaroon danish pudding.4
• chocolate cheesecake candy2
• Oat cake icing pastry pie carrot1

Use anchors to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. This separate class contains a few overrides to add compatibility for <a>s as well as the hover and focus states.

You can use .list-group-item-actionfor <button>tag also. This separate class contains a few overrides to add compatibility for <button>s as well as the hover and focus states. Be sure to not use the standard .btnclasses here.

Use contextual classes to style list items, default or linked. Also includes .active state.

• A simple primary 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 nearly any HTML within, even for linked list groups like the one below.

Add .list-group-horizontalto change the layout of list group items from vertical to horizontal across all breakpoints.choose a responsive variantcode .list-group-horizontal-{sm|md|lg|xl}to make a list group horizontal starting at that breakpoint’s min-width.

• Chocolate cake
• Cookie pie
• Cheesecake
• Cotton candy