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 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>
vue
<template>
 <ListGroupList>
  <ListGroupItemAction
   to="/lang-en/components/list-group"
   dynamic-route
  >
   The current button
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A second item
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A third item
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A fourth item
  </ListGroupItemAction>
  <ListGroupItemAction
   to="/"
   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

  1. A list item
  2. A list item
  3. 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.

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. 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
    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
    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
    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>

Theme 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
vue
<template>
 <ListGroupList>
  <ListGroupItem>
   A simple default list group item
  </ListGroupItem>
  <ListGroupItem color="primary">
   A simple primary list group item
  </ListGroupItem>
  <ListGroupItem color="secondary">
   A simple secondary list group item
  </ListGroupItem>
  <ListGroupItem color="success">
   A simple success list group item
  </ListGroupItem>
  <ListGroupItem color="danger">
   A simple danger list group item
  </ListGroupItem>
  <ListGroupItem color="warning">
   A simple warning list group item
  </ListGroupItem>
  <ListGroupItem color="info">
   A simple info list group item
  </ListGroupItem>
  <ListGroupItem color="light">
   A simple light list group item
  </ListGroupItem>
  <ListGroupItem color="dark">
   A simple dark list group item
  </ListGroupItem>
 </ListGroupList>
</template>

For links and button

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
vue
<template>
 <ListGroup>
  <ListGroupItemAction>
   A simple default list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="primary">
   A simple primary list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="secondary">
   A simple secondary list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="success">
   A simple success list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="danger">
   A simple danger list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="warning">
   A simple warning list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="info">
   A simple info list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="light">
   A simple light list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="dark">
   A simple dark list group item
  </ListGroupItemAction>
 </ListGroup>
</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
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A second list item
   <Badge
    color="primary"
    pill
   >
    2
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A third list item
   <Badge
    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
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A second list item
   <Badge
    color="primary"
    pill
   >
    2
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A third list item
   <Badge
    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.

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

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>

Extend

Theme colors

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark
  • primary-subtle
  • secondary-subtle
  • success-subtle
  • danger-subtle
  • warning-subtle
  • info-subtle
  • light-subtle
  • dark-subtle

All colors

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

Integration

Sortable

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
[
 {
  "id": 1,
  "name": "An item"
 },
 {
  "id": 2,
  "name": "A second item"
 },
 {
  "id": 3,
  "name": "A third item"
 },
 {
  "id": 4,
  "name": "A fourth item"
 },
 {
  "id": 5,
  "name": "And a fifth one"
 }
]
vue
<template>
 <ViewState
  v-slot="example"
  src="state://sortable/"
  :data="[
   { id: 1, name: 'An item' },
   { id: 2, name: 'A second item' },
   { id: 3, name: 'A third item' },
   { id: 4, name: 'A fourth item' },
   { id: 5, name: 'And a fifth one' },
  ]"
 >
  <ListGroupList>
   <Sortable
    :state-src="example"
   >
    <ListGroupItem
     v-for="item in example.data"
     :id="`${item.id}`"
     :key="item.id"
     toggle="list"
    >
     {{ item.name }}
    </ListGroupItem>
   </Sortable>
  </ListGroupList>
  <JsonView :data="example.data" />
 </ViewState>
</template>