List Group
List groups are a flexible and powerful component for displaying a series of content.
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
- chocolate cheesecake candy
- Oat cake icing pastry pie carrot
Disabled items
Add
.disabled to a
.list-group-item
to gray it out to appear disabled.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- Biscuit jelly beans macaroon danish pudding
- Oat cake icing pastry pie carrot
Button list Group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Badges
Use Utility classes
.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
Checkboxes and radios
Place checkboxes and radios within list group items and customize as needed.
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
3 days ago
Donec 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 ago
Donec 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 ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
Contextual classes
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
Horizontal
Add
.list-group
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.