- An item
- A second item
- A third item
- A fourth item
- And a fifth one
List group
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.
Basic example
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.
Active items
Add .active to a .list-group-item to indicate the current active selection.
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
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).
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Contextual classes
Use contextual classes to style list items with a stateful background and color.
- A simple default list group item
- 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 utilities.
- A list item 14
- A second list item 2
- A third list item 1
Custom content
Add nearly any HTML within, even for linked list groups like the one below,
with the help of flexbox utilities.
