Components

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.

This page shows some example usage of the <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.

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.

  • An item
  • A second item
  • A third item

Flush

Add 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

Numbered

Add numbered to opt into numbered list group items.

  1. An item
  2. A second item
  3. A third item

Active items

Add active to an item to indicate the current active selection.

  • An item
  • A second item
  • A third item

Buttons

Use attribute actionable equal to true to convert list group items to buttons.

Contextual classes

Use contextual classes to style list items with a stateful background and color.

Disabled items

Add disabled to an ListGroup.item to make it appear disabled.

  • An item
  • A second item
  • A third item

Horizontal

Add horizontal to change the layout of list group items from vertical to horizontal across all breakpoints.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth on

Alternatively, choose a responsive variant to make a list group horizontal starting at that breakpoint’s min-width.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth on

With badges

Add badges to any list group item to show unread counts, activity, and more.

  • 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.

  • 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.