Simple 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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
Disabled items
Add .disabled
to a .list-group-item
to gray it out to appear disabled.
Icons
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
Badges
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. 4
- chocolate cheesecake candy 2
- Oat cake icing pastry pie carrot 1
Contextual classes
Use contextual classes to style list items, default or linked. Also includes .active state.
- 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 dark list group item
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Flush
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).
- Sweet gummi bears gingerbread carrot
- Cake macaroon brownie wafer soufflé
- Jelly beans lemon drops
- Lollipop ice cream donut chupa chups
- Chocolate candy canes tootsie roll
Horizontal
Add .list-group-horizontal
to change the layout of list group items from vertical to horizontal
across all breakpoints. Choose a responsive variant code
.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