List group
Basic example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Active items
Add .active
to a .list-group-item
to indicate the current active selection.
Add .disabled
to a .list-group-item
to make it appear disabled. Note that some elements with .disabled
will also require custom JavaScript to fully disable their click events (e.g., links).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Links and buttons
Use <a>
s or <button>
s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action
. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>
s or <div>
s) don’t provide a click or tap affordance.
Flush
Add .list-group-flush
to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal
Add .list-group-horizontal
to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl}
to make a list group horizontal starting at that breakpoint’s min-width
. Currently horizontal list groups cannot be combined with flush list groups.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Contextual classes
Use contextual classes to style list items with a stateful background and color.
- Dapibus ac facilisis in
- 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 light list group item
- A simple dark list group item
With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Custom content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
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.