Variations
List group is a flexible and powerful component for displaying a series of content. List group has some border versions, look examples below.
Default
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Default
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Bordered
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Deck bordered
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
States
Add active property to a ListGroup.Item to indicate the current active selection.
Add disabled property to a ListGroup.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).
- Active
- Disabled
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal
Add horizontal property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant by set horizontal property with .sm|md|lg|xl to make a list group horizontal starting at that breakpoint’s min-width.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Additional content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
list-group 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 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 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.
Links and buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding action property. 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.
Contextual color
Use variant property to style list items with a stateful background and color.
- Dapibus ac facilisis inspect
- A simple primary list-group group item
- A simple secondary list-group group item
- A simple success list-group group item
- A simple danger list-group group item
- A simple warning list-group group item
- A simple info list-group group item
- A simple light list-group group item
- A simple dark list-group group item
Badges
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1