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 button
s.
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.