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

<template>
  <ListGroupList>
    <ListGroupItem toggle="list">
      An item
    </ListGroupItem>
    <ListGroupItem toggle="list">
      A second item
    </ListGroupItem>
    <ListGroupItem toggle="list">
      A third item
    </ListGroupItem>
    <ListGroupItem toggle="list">
      A fourth item
    </ListGroupItem>
    <ListGroupItem toggle="list">
      And a fifth one
    </ListGroupItem>
  </ListGroupList>
</template>

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

<template>
  <ListGroupList>
    <ListGroupItem active>
      An active item
    </ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
    <ListGroupItem>A fourth item</ListGroupItem>
    <ListGroupItem>And a fifth one</ListGroupItem>
  </ListGroupList>
</template>

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

<template>
  <ListGroupList>
    <ListGroupItem disabled>
      A disabled item
    </ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
    <ListGroupItem>A fourth item</ListGroupItem>
    <ListGroupItem>And a fifth one</ListGroupItem>
  </ListGroupList>
</template>

Links and buttons

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

The current link item A second link item A third link item A fourth link item A disabled link item

vue

<template>
  <ListGroup>
    <ListGroupItemAction
      toggle="list"
      active
    >
      The current link item
    </ListGroupItemAction>
    <ListGroupItemAction toggle="list">
      A second link item
    </ListGroupItemAction>
    <ListGroupItemAction toggle="list">
      A third link item
    </ListGroupItemAction>
    <ListGroupItemAction toggle="list">
      A fourth link item
    </ListGroupItemAction>
    <ListGroupItemAction disabled>
      A disabled link item
    </ListGroupItemAction>
  </ListGroup>
</template>

A disabled button item

vue

<template>
  <ListGroupList>
    <ListGroupItemAction active>
      The current button
    </ListGroupItemAction>
    <ListGroupItemAction>A second item</ListGroupItemAction>
    <ListGroupItemAction>A third item</ListGroupItemAction>
    <ListGroupItemAction>A fourth item</ListGroupItemAction>
    <ListGroupItemAction disabled>
      A disabled button item
    </ListGroupItemAction>
  </ListGroupList>
</template>

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

<template>
  <ListGroupList flush>
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
    <ListGroupItem>A fourth item</ListGroupItem>
    <ListGroupItem>And a fifth one</ListGroupItem>
  </ListGroupList>
</template>

Numbered

A list item
A list item
A list item

vue

<template>
  <ListGroupList numbered>
    <ListGroupItem>A list item</ListGroupItem>
    <ListGroupItem>A list item</ListGroupItem>
    <ListGroupItem>A list item</ListGroupItem>
  </ListGroupList>
</template>

These work great with custom content as well.

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

vue

<template>
  <ListGroupList numbered>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="start"
    >
      <b-div margin="s-2 e-auto">
        <b-div font-weight="bold">
          Subheading
        </b-div>
        Content for list item
      </b-div>
      <Badge
        background-color="primary"
        pill
      >
        14
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="start"
    >
      <b-div margin="s-2 e-auto">
        <b-div font-weight="bold">
          Subheading
        </b-div>
        Content for list item
      </b-div>
      <Badge
        background-color="primary"
        pill
      >
        14
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="start"
    >
      <b-div margin="s-2 e-auto">
        <b-div font-weight="bold">
          Subheading
        </b-div>
        Content for list item
      </b-div>
      <Badge
        background-color="primary"
        pill
      >
        14
      </Badge>
    </ListGroupItem>
  </ListGroupList>
</template>

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

<template>
  <ListGroupList horizontal>
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
  <ListGroupList horizontal="sm">
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
  <ListGroupList horizontal="md">
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
  <ListGroupList horizontal="lg">
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
  <ListGroupList horizontal="xl">
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
  <ListGroupList horizontal="xxl">
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
  </ListGroupList>
</template>

With badges

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

vue

<template>
  <ListGroupList>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A list item
      <Badge
        background-color="primary"
        pill
      >
        14
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A second list item
      <Badge
        background-color="primary"
        pill
      >
        2
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A third list item
      <Badge
        background-color="primary"
        pill
      >
        1
      </Badge>
    </ListGroupItem>
  </ListGroupList>
</template>

Custom content

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 small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

vue

<template>
  <ListGroupList>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A list item
      <Badge
        background-color="primary"
        pill
      >
        14
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A second list item
      <Badge
        background-color="primary"
        pill
      >
        2
      </Badge>
    </ListGroupItem>
    <ListGroupItem
      flex
      justify-content="between"
      align-items="center"
    >
      A third list item
      <Badge
        background-color="primary"
        pill
      >
        1
      </Badge>
    </ListGroupItem>
  </ListGroupList>
</template>

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.

First checkbox
Second checkbox
Third checkbox

vue

<template>
  <ListGroupList>
    <ListGroupItem>
      <BFormCheckInput
        id="firstCheckBox"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="firstCheckBox">
        First checkbox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="secondCheckBox"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="secondCheckBox">
        Second checkbox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="thirdCheckBox"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="thirdCheckBox">
        Third checkbox
      </BFormCheckLabel>
    </ListGroupItem>
  </ListGroupList>
</template>

First RadioBox
Second RadioBox
Third RadioBox

vue

<template>
  <ListGroupList>
    <ListGroupItem>
      <BFormCheckInput
        id="firstRadioBox"
        type="radio"
        name="listGroupRadio"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="firstRadioBox">
        First RadioBox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="secondRadioBox"
        type="radio"
        name="listGroupRadio"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="secondRadioBox">
        Second RadioBox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="thirdRadioBox"
        type="radio"
        name="listGroupRadio"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel for="thirdRadioBox">
        Third RadioBox
      </BFormCheckLabel>
    </ListGroupItem>
  </ListGroupList>
</template>

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

First checkbox
Second checkbox
Third checkbox

vue

<template>
  <ListGroupList>
    <ListGroupItem>
      <BFormCheckInput
        id="firstCheckBoxStretched"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel
        stretched
        for="firstCheckBoxStretched"
      >
        First checkbox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="secondCheckBoxStretched"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel
        stretched
        for="secondCheckBoxStretched"
      >
        Second checkbox
      </BFormCheckLabel>
    </ListGroupItem>
    <ListGroupItem>
      <BFormCheckInput
        id="thirdCheckBoxStretched"
        type="checkbox"
        margin="e-2"
        value=""
      />
      <BFormCheckLabel
        stretched
        for="thirdCheckBoxStretched"
      >
        Third checkbox
      </BFormCheckLabel>
    </ListGroupItem>
  </ListGroupList>
</template>