The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Attach .active to a .list-group-item to show the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Attach .disabled to a .list-group-item to make it appear disabled. Remark that some of the elements with .disabled will also require custom JavaScript to disable their click events (e.g., links).
- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one
Use <a>s or <button>s to createactionable list group items with hover, disabled, and active states by adding .list-group-item-action. 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.
Be sure to not use the standard .btn classes here.
With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.
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
Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.
ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
Use contextual classes to style list items with a stateful background and color.
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
.actionContextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the .active state; apply it to indicate an active selection on a contextual list group item.
Add badges to any list group item to show unread counts, activity, and more with the help of someutilities.
- A list item14
- A second list item2
- A third list item1
Add nearly any HTML within, even for linked list groups like the one below, with the help offlexbox 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.