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.

On this page

Basic examples

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
  • A fourth item
  • And a fifth one
vue

Active items

Add active to a ListGroupItem to indicate the current active selection.

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
vue

Disabled items

Add disabled to a ListGroupItem to make it appear disabled.

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
vue

Links and buttons

create actionable list group items with hover, disabled, and active states by adding ListGroupItemAction.

Flush

Add ListGroupFlush 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
vue

Numbered

  1. A list item
  2. A list item
  3. A list item
vue

These work great with custom content as well.

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
vue

Horizontal

Add horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant 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.

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

With badges

  • A list item 14
  • A second list item 2
  • A third list item 1
vue

Custom content

Checkboxes and radios

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <BFormCheckLabel>s, but please remember to include an aria-label attribute and value for accessibility.

vue
vue

You can use stretched on <BFormCheckLabel>s to make the whole list group item clickable.

vue

Extend

Theme colors

  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item
  • A list item

All colors

  • blue
  • blue
  • blue-100
  • blue-100
  • blue-200
  • blue-200
  • blue-300
  • blue-300
  • blue-400
  • blue-400
  • blue-500
  • blue-500
  • blue-600
  • blue-600
  • blue-700
  • blue-700
  • blue-800
  • blue-800
  • blue-900
  • blue-900
  • indigo
  • indigo
  • indigo-100
  • indigo-100
  • indigo-200
  • indigo-200
  • indigo-300
  • indigo-300
  • indigo-400
  • indigo-400
  • indigo-500
  • indigo-500
  • indigo-600
  • indigo-600
  • indigo-700
  • indigo-700
  • indigo-800
  • indigo-800
  • indigo-900
  • indigo-900
  • purple
  • purple
  • purple-100
  • purple-100
  • purple-200
  • purple-200
  • purple-300
  • purple-300
  • purple-400
  • purple-400
  • purple-500
  • purple-500
  • purple-600
  • purple-600
  • purple-700
  • purple-700
  • purple-800
  • purple-800
  • purple-900
  • purple-900
  • pink
  • pink
  • pink-100
  • pink-100
  • pink-200
  • pink-200
  • pink-300
  • pink-300
  • pink-400
  • pink-400
  • pink-500
  • pink-500
  • pink-600
  • pink-600
  • pink-700
  • pink-700
  • pink-800
  • pink-800
  • pink-900
  • pink-900
  • red
  • red
  • red-100
  • red-100
  • red-200
  • red-200
  • red-300
  • red-300
  • red-400
  • red-400
  • red-500
  • red-500
  • red-600
  • red-600
  • red-700
  • red-700
  • red-800
  • red-800
  • red-900
  • red-900
  • orange
  • orange
  • orange-100
  • orange-100
  • orange-200
  • orange-200
  • orange-300
  • orange-300
  • orange-400
  • orange-400
  • orange-500
  • orange-500
  • orange-600
  • orange-600
  • orange-700
  • orange-700
  • orange-800
  • orange-800
  • orange-900
  • orange-900
  • yellow
  • yellow
  • yellow-100
  • yellow-100
  • yellow-200
  • yellow-200
  • yellow-300
  • yellow-300
  • yellow-400
  • yellow-400
  • yellow-500
  • yellow-500
  • yellow-600
  • yellow-600
  • yellow-700
  • yellow-700
  • yellow-800
  • yellow-800
  • yellow-900
  • yellow-900
  • green
  • green
  • green-100
  • green-100
  • green-200
  • green-200
  • green-300
  • green-300
  • green-400
  • green-400
  • green-500
  • green-500
  • green-600
  • green-600
  • green-700
  • green-700
  • green-800
  • green-800
  • green-900
  • green-900
  • teal
  • teal
  • teal-100
  • teal-100
  • teal-200
  • teal-200
  • teal-300
  • teal-300
  • teal-400
  • teal-400
  • teal-500
  • teal-500
  • teal-600
  • teal-600
  • teal-700
  • teal-700
  • teal-800
  • teal-800
  • teal-900
  • teal-900
  • cyan
  • cyan
  • cyan-100
  • cyan-100
  • cyan-200
  • cyan-200
  • cyan-300
  • cyan-300
  • cyan-400
  • cyan-400
  • cyan-500
  • cyan-500
  • cyan-600
  • cyan-600
  • cyan-700
  • cyan-700
  • cyan-800
  • cyan-800
  • cyan-900
  • cyan-900
On this page