List Group
List group List groups are a flexible and powerful component for displaying a series of content. List group items can be modified to support just about any content within. They can also be used as navigation via various props. See documentation.
List group
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Active items
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group> Set the active prop on a <b-list-group-item> to indicate the current active selection.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Disabled items
<b-list-group>
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group> Set the disabled prop on a <b-list-group-item> to make it appear disabled (also works with actionalable items. see below).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Actionable list group items
<b-list-group>
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
<b-list-group-item href="#">Action links are easy</b-list-group-item>
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group> Turn a <b-list-group-item> into an actionable link (<a href="...">) by specifying either an href prop or router-link to prop.
Contextual variants
<b-list-group>
<b-list-group-item href="#">Default list group item</b-list-group-item>
<b-list-group-item href="#" variant="primary">Primary list group item</b-list-group-item>
<b-list-group-item href="#" variant="secondary">Secondary list group item</b-list-group-item>
<b-list-group-item href="#" variant="success">Success list group item</b-list-group-item>
<b-list-group-item href="#" variant="danger">Danger list group item</b-list-group-item>
<b-list-group-item href="#" variant="warning">Warning list group item</b-list-group-item>
<b-list-group-item href="#" variant="info">Info list group item</b-list-group-item>
<b-list-group-item href="#" variant="light">Light list group item</b-list-group-item>
<b-list-group-item href="#" variant="dark">Dark list group item</b-list-group-item>
</b-list-group> Use contextual variants to style list items with a stateful background and color, via the variant prop.
With badges
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Cras justo odio
<b-badge variant="primary" pill>14</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<b-badge variant="primary" pill>2</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Morbi leo risus
<b-badge variant="primary" pill>1</b-badge>
</b-list-group-item>
</b-list-group> Add badges to any list group item to show unread counts, activity, and more with the help of some utility classes.
Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1