List group

Vue Bootstrap 5 List group component

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.

Note: Read the API tab to find all available options and advanced customization

Basic example

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<template>
  <MDBListGroup>
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Active items

Add active prop to a MDBListGroupItem to indicate the current active selection.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<template>
  <MDBListGroup>
    <MDBListGroupItem active>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Disabled items

Add disabled to a MDBListGroupItem to make it appear disabled. Note that some elements with disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<template>
  <MDBListGroup>
    <MDBListGroupItem disabled>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Flush

Add flush prop to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<template>
  <MDBListGroup flush>
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

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.

Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the <li> with counter-increment and content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<MDBListGroup numbered style="min-width: 22rem">
  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
  <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
</MDBListGroup>
import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
export default {
  components: {
    MDBListGroup,
    MDBListGroupItem
  }
};

These work great with custom content as well.

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14 
<MDBListGroup numbered style="min-width: 22rem">
  <MDBListGroupItem
    class="d-flex justify-content-between align-items-start"
  >
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <MDBBadge color="primary" pill>14</MDBBadge>
  </MDBListGroupItem>
  <MDBListGroupItem
    class="d-flex justify-content-between align-items-start"
  >
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <MDBBadge color="primary" pill>14</MDBBadge>
  </MDBListGroupItem>
  <MDBListGroupItem
    class="d-flex justify-content-between align-items-start"
  >
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <MDBBadge color="primary" pill>14</MDBBadge>
  </MDBListGroupItem>
</MDBListGroup>
import { MDBListGroup, MDBListGroupItem, MDBBadge } from "mdb-vue-ui-kit";
export default {
  components: {
    MDBListGroup,
    MDBListGroupItem,
    MDBBadge
  }
};

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.

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <MDBListGroup horizontal>
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
  <MDBListGroup horizontal="sm">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
  <MDBListGroup horizontal="md">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
  <MDBListGroup horizontal="lg">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
  <MDBListGroup horizontal="xl">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
  <MDBListGroup horizontal="xxl">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Contextual props

Use contextual color props to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • 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
<template>
  <MDBListGroup>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem color="primary">A simple primary list group item</MDBListGroupItem>
    <MDBListGroupItem color="secondary">A simple secondary list group item</MDBListGroupItem>
    <MDBListGroupItem color="success">A simple success list group item</MDBListGroupItem>
    <MDBListGroupItem color="danger">A simple danger list group item</MDBListGroupItem>
    <MDBListGroupItem color="warning">A simple warning list group item</MDBListGroupItem>
    <MDBListGroupItem color="info">A simple info list group item</MDBListGroupItem>
    <MDBListGroupItem color="light">A simple light list group item</MDBListGroupItem>
    <MDBListGroupItem color="dark">A simple dark list group item</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Contextual props also work with MDBListGroupItem action. Note the addition of the hover styles here not present in the previous example. Also supported is the active state; apply it to indicate an active selection on a contextual list group item.

Dapibus ac facilisis in 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 
<template>
  <MDBListGroup>
    <MDBListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="primary">A simple primary list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="secondary">A simple secondary list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="success">A simple success list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="danger">A simple danger list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="warning">A simple warning list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="info">A simple info list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="light">A simple light list group item</MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action color="dark">A simple dark list group item</MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Badges

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

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
<template>
  <MDBListGroup>
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio
      <MDBBadge color="primary" pill>14</MDBBadge>
    </MDBListGroupItem>
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in
      <MDBBadge color="primary" pill>2</MDBBadge>
    </MDBListGroupItem>
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus
      <MDBBadge color="primary" pill>1</MDBBadge>
    </MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem, MDBBadge } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem,
      MDBBadge
    }
  };
</script>

Custom content

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

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.
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. 
<template>
  <MDBListGroup>
    <MDBListGroupItem tag="a" href="#" action active>
      <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>
    </MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action>
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">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-muted">Donec id elit non mi porta.</small>
    </MDBListGroupItem>
    <MDBListGroupItem tag="a" href="#" action>
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">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-muted">Donec id elit non mi porta.</small>
    </MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

Checkboxes

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros 
<template>
  <MDBListGroup>
    <MDBListGroupItem>
      <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
      Cras justo odio
    </MDBListGroupItem>
    <MDBListGroupItem>
      <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
      Dapibus ac facilisis in
    </MDBListGroupItem>
    <MDBListGroupItem>
      <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
      Morbi leo risus
    </MDBListGroupItem>
    <MDBListGroupItem>
      <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
      Porta ac consectetur ac
    </MDBListGroupItem>
    <MDBListGroupItem>
      <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
      Vestibulum at eros
    </MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

And if you want <label>s as the MDBListGroupItem for large hit areas, you can do that, too. 

<template>
  <MDBListGroup>
    <MDBListGroupItem tag="label">
      <input class="form-check-input me-1" type="checkbox" value="" />
      Cras justo odio
    </MDBListGroupItem>
    <MDBListGroupItem tag="label">
      <input class="form-check-input me-1" type="checkbox" value="" />
      Dapibus ac facilisis in
    </MDBListGroupItem>
    <MDBListGroupItem tag="label">
      <input class="form-check-input me-1" type="checkbox" value="" />
      Morbi leo risus
    </MDBListGroupItem>
    <MDBListGroupItem tag="label">
      <input class="form-check-input me-1" type="checkbox" value="" />
      Porta ac consectetur ac
    </MDBListGroupItem>
    <MDBListGroupItem tag="label">
      <input class="form-check-input me-1" type="checkbox" value="" />
      Vestibulum at eros
    </MDBListGroupItem>
  </MDBListGroup>
</template>
<script>
  import { MDBListGroup, MDBListGroupItem } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBListGroup,
      MDBListGroupItem
    }
  };
</script>

List group - API

Import

<script>
  import {
    MDBListGroup,
    MDBListGroupItem
  } from 'mdb-vue-ui-kit';
</script>

Properties

MDBListGroup

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBListGroup element <MDBListGroup tag="section" />
horizontal Boolean | String false Changes list group's display to horizontal at all breakpoints when no value is passed and to a specific breakpoint when a value is passed. Use (sm | md | lg | xl | ) values <MDBListGroup horizontal /> <MDBListGroup horizontal="md" />
flush Boolean false Removes list's borders <MDBListGroup flush />
numbered Boolean false Adds list item numeration <MDBListGroup numbered />

MDBListGroupItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBListGroupItem element <MDBListGroupItem tag="div" />
color String Changes the list item's style according to the passed value (primary, warning, danger, secondary, success, light, dark) or background to the given color (primary-color, light-blue, pink, etc) <MDBListGroupItem color="danger" />
active Boolean false Sets item active <MDBListGroupItem active />
disabled Boolean false Sets item disabled <MDBListGroupItem disabled />
action Boolean false Changes list group item's styling to action <MDBListGroupItem action />