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.
Add .disabled
to a .list-group-item
to 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-between
align-items-center
to create space between badge and your content
Use contextual classes to style list items, default or linked. Also includes .active state.
Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
Add .list-group-flush
with .list-group
to remove some borders and rounded
corners
to render list group items edge-to-edge in
a parent container (e.g., cards).
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.