List group
List groups are a flexible and powerful component for displaying a series of content.
Basic List
Set the active prop to indicate the list groups current active selection and set the disabled prop to prevent actions on a <ListGroup.Item>.
Flush
Add the flush variant to remove outer borders and rounded corners to render list group items edge-to-edge in a parent container such as a Card.
Contextual classes
Use contextual variants on <ListGroup.Item>s to style them with a stateful background and color.
Contextual classes inverse
Use .list-group-inv .list-group-inv-* to change the appearance of list group items.
Horizontal
Use the horizontal prop to make the ListGroup render horizontally.There are responsive variants to horizontal: setting it to sm|md|lg|xl|xxl makes the list group horizontal starting at that breakpoint’s min-width.
With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some flex utilities.
Actionable items
Toggle the action prop to create actionable list group items, with disabled, hover and active styles. List item actions will render a <button> or <a> (depending on the presence of an href) by default but can be overridden by setting the as prop as usual.
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.With icons
Add Icons with list groups
With checkbox
Place Bootstrap’s checkboxes and radios within list group items and customize as needed.
Tabbed Interfaces
You can also use the Tab components to create ARIA compliant tabbable interfaces with the <ListGroup> component. Swap out the <Nav> component for the list group and you are good to go.
Numbered
Add the numbered prop to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.
- Cras justo odio
- Cras justo odio
- Cras justo odio