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
The most basic list group is an unordered list with list items and the proper classes.
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
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
Disabled Items
Add .disabled to a .list-group-item to make it appear disabled.
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Links and Buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
The current link item A second link item A third link item A fourth link item A disabled link item
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
Numbered
Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items.
  1. A list item
  2. A list item
  3. A list item
  4. A list item
  5. A list item
Icons & Badges
  • Subheading
    Content for list item
    1
  • Subheading
    Content for list item
    10
  • Subheading
    Content for list item
    100
  • Subheading
    10
  • Subheading
    1
  • Subheading
    0
Horizontal
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.
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
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
Variants
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
For links and buttons
Contextual classes also work with .list-group-item-action for <a> and <button> elements.
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
Custom Content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
Checkboxes and Radios
You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.
Checkboxes
Radios
© 2023 , Designed & Developed by Lyslid