List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
<BsListGroup> component. For the full documentation please refer to
the API Docs. You might also want to consult the official
Bootstrap Docs for general information.
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Add flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
Add numbered to opt into numbered list group items.
Add active to an item to indicate the current active selection.
Use attribute actionable equal to true to convert list group items to buttons.
Use contextual classes to style list items with a stateful background and color.
Add disabled to an ListGroup.item to make it appear disabled.
Add horizontal to change the layout of list group items from vertical to horizontal across all breakpoints.
Alternatively, choose a responsive variant to make a list group horizontal starting at that breakpoint’s min-width.
Add badges to any list group item to show unread counts, activity, and more.
Add nearly any HTML within, even for linked list groups like the one below.
Some placeholder content in a paragraph.
And some small print.Some placeholder content in a paragraph.
And some muted small print.Some placeholder content in a paragraph.
And some muted small print.