brandv1.0
Utilities
Data Display
Data Entry
Feedback

List group

List groups are a flexible and powerful component for displaying a series of content.

Basic List

Set the active prop on a BListGroupItem to indicate the current active selection and disabled prop to make it appear disabled.

Regular list group item
Active list group item
Disabled list group item
							
                                
<template>
    <BListGroup>
        <BListGroupItem>Regular list group item</BListGroupItem>
        <BListGroupItem active>Active list group item</BListGroupItem>
        <BListGroupItem disabled>Disabled list group item</BListGroupItem>
    </BListGroup>
</template>
Props Value Default
active boolean false
disabled boolean false
Flush

Use flush prop on a BListGroup to remove some borders and rounded corners to render list group items edge-to-edge in a parent container.

Regular list group item
Active list group item
Disabled list group item
							
                                
<template>
    <BListGroup flush>
        <BListGroupItem>Regular list group item</BListGroupItem>
        <BListGroupItem active>Active list group item</BListGroupItem>
        <BListGroupItem disabled>Disabled list group item</BListGroupItem>
    </BListGroup>
</template>
Props Value Default
flush boolean false
Contextual variants

Use contextual variants to style list items with a stateful background and color, via the variant prop on a BListGroupItem.

Default list group item
Primary list group item
Secondary list group item
Success list group item
Danger list group item
Warning list group item
Info list group item
Light list group item
Dark list group item
							
                                
<template>
    <BListGroup>
        <BListGroupItem>Default list group item</BListGroupItem>
        <BListGroupItem variant="primary">Primary list group item</BListGroupItem>
        <BListGroupItem variant="secondary">Secondary list group item</BListGroupItem>
        <BListGroupItem variant="success">Success list group item</BListGroupItem>
        <BListGroupItem variant="danger">Danger list group item</BListGroupItem>
        <BListGroupItem variant="warning">Warning list group item</BListGroupItem>
        <BListGroupItem variant="info">Info list group item</BListGroupItem>
        <BListGroupItem variant="light">Light list group item</BListGroupItem>
        <BListGroupItem variant="dark">Dark list group item</BListGroupItem>
    </BListGroup>
</template>
Props Value Default
variant primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke undefined
Contextual classes inverse

Use .list-group-inv .list-group-inv-* to change the appearance of list group items.

Default list group item
Primary list group item
Secondary list group item
Success list group item
Danger list group item
Warning list group item
Info list group item 
							
                                
<template>
    <BListGroup>
        <BListGroupItem>
            Default list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-primary">
            Primary list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-secondary">
            Secondary list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-success">
            Success list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-danger">
            Danger list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-warning">
            Warning list group item
        </BListGroupItem>
        <BListGroupItem class="list-group-inv list-group-inv-info">
            Info list group item
        </BListGroupItem>
    </BListGroup>
</template>
Class Values
class="list-group-inv list-group-inv-[Value]" primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Horizontal

Set the prop horizontal to true to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, set horizontal to a responsive breakpoint (sm, md, lg or xl) 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
							
                                
<template>
    <BRow>
        <BCol>
            <BListGroup horizontal>
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
            <BListGroup horizontal="sm">
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
            <BListGroup horizontal="md">
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
            <BListGroup horizontal="lg">
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
            <BListGroup horizontal="xl">
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
            <BListGroup horizontal="xxl">
                <BListGroupItem>An item</BListGroupItem>
                <BListGroupItem>A second item</BListGroupItem>
                <BListGroupItem>A third item</BListGroupItem>
            </BListGroup>
        </BCol>
    </BRow>
</template>
Props Value Default
horizontal boolean | sm | md | lg | xl | xxl false
With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some flex utilities.

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
							
                                
<template>
    <BListGroup>
        <BListGroupItem class="d-flex justify-content-between align-items-center">
            Cras justo odio
            <BBadge variant="primary" pill>14</BBadge>
        </BListGroupItem>

        <BListGroupItem class="d-flex justify-content-between align-items-center">
            Dapibus ac facilisis in
            <BBadge variant="primary" pill>2</BBadge>
        </BListGroupItem>

        <BListGroupItem class="d-flex justify-content-between align-items-center">
            Morbi leo risus
            <BBadge variant="primary" pill>1</BBadge>
        </BListGroupItem>
    </BListGroup>
</template>
Links and buttons

Use button, href or to props on a BListGroupItem to create actionable list group items with hover, disabled, and active states.

Link list group item 
							
                                
<template>
    <BListGroup>
        <BListGroupItem button active> Button list group item </BListGroupItem>
        <BListGroupItem href="#"> Link list group item </BListGroupItem>
    </BListGroup>
</template>
Props Value Default
button boolean false
href string undefined
to RouteLocationRaw undefined
target LinkTarget undefined
Custom content

Add nearly any HTML or component within, even for linked list groups like the one below, with the help of flexbox utility classes.

List Group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List Group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Disabled List Group item
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
							
                                
<template>
    <BListGroup>
        <BListGroupItem href="#" active class="flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List Group item heading</h5>
                <small>3 days ago</small>
            </div>
            <p class="mb-1">
                Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
            </p>
            <small>Donec id elit non mi porta.</small>
        </BListGroupItem>

        <BListGroupItem href="#" class="flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List Group item heading</h5>
                <small class="text-body-secondary">3 days ago</small>
            </div>
            <p class="mb-1">
                Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
            </p>
            <small class="text-body-secondary">Donec id elit non mi porta.</small>
        </BListGroupItem>

        <BListGroupItem href="#" disabled class="flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">Disabled List Group item</h5>
                <small class="text-body-secondary">3 days ago</small>
            </div>
            <p class="mb-1">
                Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
            </p>
            <small class="text-body-secondary">Donec id elit non mi porta.</small>
        </BListGroupItem>
    </BListGroup>
</template>
With icons

Add Icons with list groups

List group item one
List group item two
List group item three
List group item one 12
List group item two 10
List group item three 1
							
                                
<template>
    <BRow>
        <BCol>
            <BListGroup>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    List group item one
                    <i class="las la-exclamation-circle text-light fs-4"></i>
                </BListGroupItem>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    List group item two
                    <i class="las la-las la-user text-light fs-4"></i>
                </BListGroupItem>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    List group item three
                    <i class="las la-bell text-light fs-4"></i>
                </BListGroupItem>
            </BListGroup>
        </BCol>
        <BCol>
            <BListGroup>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <span class="d-flex">
                        <i class="las la-exclamation-circle fs-4 text-light me-2"></i>
                        List group item one
                    </span>
                    <span>12</span>
                </BListGroupItem>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <span class="d-flex">
                        <i class="las la-las la-user fs-4 text-light me-2"></i>
                        List group item two
                    </span>
                    <span>10</span>
                </BListGroupItem>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <span class="d-flex">
                        <i class="las la-bell fs-4 text-light me-2"></i>List group item three
                    </span>
                    <span>1</span>
                </BListGroupItem>
            </BListGroup>
        </BCol>
    </BRow>
</template>
With checkbox

Place Bootstrap’s checkboxes and radios within list group items and customize as needed.

12
10
15
							
                                
<template>
    <BRow>
        <BCol>
            <BListGroup>
                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <BFormCheckbox id="checkbox-1" name="checkbox-1">
                        Check this custom checkbox-1
                    </BFormCheckbox>
                </BListGroupItem>

                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <BFormCheckbox id="checkbox-2" name="checkbox-2">
                        Check this custom checkbox-2
                    </BFormCheckbox>
                </BListGroupItem>

                <BListGroupItem class="d-flex justify-content-between align-items-center">
                    <BFormCheckbox id="checkbox-3" name="checkbox-3" disabled>
                        Check this custom checkbox-3
                    </BFormCheckbox>
                </BListGroupItem>
            </BListGroup>
        </BCol>
        <BCol>
        <BListGroup>
            <BListGroupItem class="d-flex justify-content-between align-items-center">
                <BFormRadio name="some-radios" value="A">
                    Toggle this custom radio
                </BFormRadio>
                <span>12</span>
            </BListGroupItem>

            <BListGroupItem class="d-flex justify-content-between align-items-center">
                <BFormRadio name="some-radios" value="B">
                    Or toggle this other custom radio
                </BFormRadio>
                <span>10</span>
            </BListGroupItem>

            <BListGroupItem class="d-flex justify-content-between align-items-center">
                <BFormRadio name="some-radios" value="C" disabled>
                    Toggle this custom radio
                </BFormRadio>
                <span>15</span>
            </BListGroupItem>
        </BListGroup>
        </BCol>
    </BRow>
</template>
Numbered

Add the numbered property to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.

  1. Cras justo odioo
  2. Dapibus ac facilisis in
  3. Morbi leo risus
  4. Porta ac consectetur ac
  5. Vestibulum at eros
							
                                
<template>
    <BListGroup numbered>
        <BListGroupItem>Cras justo odioo</BListGroupItem>
        <BListGroupItem>Dapibus ac facilisis in</BListGroupItem>
        <BListGroupItem>Morbi leo risus</BListGroupItem>
        <BListGroupItem>Porta ac consectetur ac</BListGroupItem>
        <BListGroupItem>Vestibulum at eros</BListGroupItem>
    </BListGroup>
</template>