List Group

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.

• An item
• A second item
• A third item
• A fourth item
• And a fifth one

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

• A disabled item
• A second item
• A third item
• A fourth item
• And a fifth one

Use Utility classes .d-flex .justify-content-between align-items-center to create space between badge and your content

• Biscuit jelly beans macaroon danish pudding. 8
• chocolate cheesecake candy 7
• Oat cake icing pastry pie carrot 6
• space between badgeOat cake icing pastry pie carrot 5

Place checkboxes and radios within list group items and customize as needed

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

Add nearly any HTML within, even for linked list groups like the one below.

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

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros
• chocolate cheesecake candy
• Oat cake icing pastry pie carrot

Add .list-group-horizontal to 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.