Vue Bootstrap List Group

Vue List Group - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Vue Bootstrap list group is a flexible component which displays not only simple list of elements but complex custom content.

Basic example

The most basic list group is simply an unordered list with list items and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<template>
  <mdb-list-group>
    <mdb-list-group-item>Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item>Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item>Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item>Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item>Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Labels

Add labels to any list group item to show unread counts, activity, etc.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
<template>
  <mdb-list-group>
    <mdb-list-group-item>Cras justo odio<mdb-badge color="primary" pill>14</mdb-badge>
    </mdb-list-group-item>
    <mdb-list-group-item>Dapibus ac facilisis in<mdb-badge color="primary" pill>2</mdb-badge>
    </mdb-list-group-item>
    <mdb-list-group-item>Morbi leo risus<mdb-badge color="primary" pill>1</mdb-badge>
    </mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem, mdbBadge } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem,
      mdbBadge
    }
  }
</script>

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<template>
  <mdb-list-group>
    <mdb-list-group-item tag="a" href="#" :active="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item tag="a" href="#">Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item tag="a" href="#">Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item tag="a" href="#">Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item tag="a" href="#">Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Links and buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding :action="true". We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li"s or <div"s) don’t provide a click or tap affordance.

Be sure to not use the standard .btn classes here.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<template>
  <mdb-list-group>
    <mdb-list-group-item :action="true" href="#" tag="a"> :active="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true" href="#" tag="a">Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item :action="true" href="#" tag="a">Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item :action="true" href="#" tag="a">Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item :action="true" href="#" tag="a">Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Disabled item

Add disabled to a <mdb-list-group-item> to gray it out to appear disabled.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<template>
  <mdb-list-group>
    <mdb-list-group-item href="#" tag="a" disabled>Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item href="#" tag="a">Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item href="#" tag="a">Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item href="#" tag="a">Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item href="#" tag="a">Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Contextual classes

Use color property to style list items, default or linked. Also includes .active state.

Using one of the colors listed below will style the entire list item - but you can also change just the background property by passing the color name as an argument: color="light-blue lighten-3"

  • 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
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>
  <mdb-row>
    <mdb-col md="6" class="mt-5 px-3">
      <mdb-list-group>
        <mdb-list-group-item color="primary"
          >A simple primary list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="secondary"
          >A simple secondary list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="success"
          >A simple success list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="danger"
          >A simple danger list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="warning"
          >A simple warning list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="info"
          >A simple info list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="light"
          >A simple light list group item</mdb-list-group-item
        >
        <mdb-list-group-item color="dark"
          >A simple dark list group item</mdb-list-group-item
        >
      </mdb-list-group>
    </mdb-col>
    <mdb-col md="6" class="mt-5 px-3">
      <mdb-list-group>
        <mdb-list-group-item action color="primary"
          >A simple primary list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="secondary"
          >A simple secondary list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="success"
          >A simple success list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="danger"
          >A simple danger list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="warning"
          >A simple warning list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="info"
          >A simple info list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="light"
          >A simple light list group item</mdb-list-group-item
        >
        <mdb-list-group-item action color="dark"
          >A simple dark list group item</mdb-list-group-item
        >
      </mdb-list-group>
    </mdb-col>
  </mdb-row>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem, mdbRow, mdbCol } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem,
      mdbRow,
      mdbCol
    }
  }
</script>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

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>
  <mdb-list-group>
    <mdb-list-group-item active>
      <div>
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-2 h5">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-2">
          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>
      </div>
    </mdb-list-group-item>
    <mdb-list-group-item>
      <div>
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-2 h5">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-2">
          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>
      </div>
    </mdb-list-group-item>
    <mdb-list-group-item>
      <div>
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-2 h5">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-2">
          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>
      </div>
    </mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'ListGroupPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Horizontal

Add horizontal property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, add one of the following properties: sm md lg xl to make a list group horizontal starting at that breakpoint’s min-width.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <mdb-list-group horizontal>
    <mdb-list-group-item :action="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true">Dapibus ac facilisis in </mdb-list-group-item>
    <mdb-list-group-item :action="true">Morbi leo risus</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <mdb-list-group horizontal sm>
    <mdb-list-group-item :action="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true">Dapibus ac facilisis in </mdb-list-group-item>
    <mdb-list-group-item :action="true">Morbi leo risus</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <mdb-list-group horizontal md>
    <mdb-list-group-item :action="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true">Dapibus ac facilisis in </mdb-list-group-item>
    <mdb-list-group-item :action="true">Morbi leo risus</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <mdb-list-group horizontal lg>
    <mdb-list-group-item :action="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true">Dapibus ac facilisis in </mdb-list-group-item>
    <mdb-list-group-item :action="true">Morbi leo risus</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<template>
  <mdb-list-group horizontal xl>
    <mdb-list-group-item :action="true">Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item :action="true">Dapibus ac facilisis in </mdb-list-group-item>
    <mdb-list-group-item :action="true">Morbi leo risus</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Flush

You can add flush property 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>
  <mdb-list-group flush>
    <mdb-list-group-item active>Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item>Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item>Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item>Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item>Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

List with icons

Use icons to make your list group more creative and looks nice.

List icon with active items

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros 
<template>
  <mdb-list-group>
    <mdb-list-group-item icon="laptop" active>Cras justo odio</mdb-list-group-item>
    <mdb-list-group-item action icon="bomb">Dapibus ac facilisis in</mdb-list-group-item>
    <mdb-list-group-item icon="code">Morbi leo risus</mdb-list-group-item>
    <mdb-list-group-item icon="gem">Porta ac consectetur ac</mdb-list-group-item>
    <mdb-list-group-item icon="cogs">Vestibulum at eros</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Social icon MDB Pro component

    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
    • Porta ac consectetur ac
    • Vestibulum at eros 
<template>
  <mdb-list-group flush>
    <mdb-list-group-item :justify-content-between="false">
      <mdb-btn floating tag="a" icon="facebook-f" fab class="btn-fb"/>Cras justo odio
    </mdb-list-group-item>
    <mdb-list-group-item :justify-content-between="false">
      <mdb-btn floating tag="a" icon="twitter" fab class="btn-tw"/>Cras justo odio
    </mdb-list-group-item>
    <mdb-list-group-item :justify-content-between="false">
      <mdb-btn floating tag="a" icon="linkedin-in" fab class="btn-li"/>Cras justo odio
    </mdb-list-group-item>
    <mdb-list-group-item :justify-content-between="false">
      <mdb-btn floating tag="a" icon="slack-hash" fab class="btn-slack"/>Cras justo odio
    </mdb-list-group-item>
    <mdb-list-group-item :justify-content-between="false">
      <mdb-btn floating tag="a" icon="youtube" fab class="btn-yt"/>Cras justo odio
    </mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem, mdbBtn } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem,
      mdbBtn
    }
  }
</script>

Icon list with square icons

Photos

Work

Vacation

<template>
  <mdb-list-group flush>
    <mdb-list-group-item social fab iconColor="primary-color" icon="instagram">Photos</mdb-list-group-item>
    <mdb-list-group-item social iconColor="red" fab icon="slack-hash">Work</mdb-list-group-item>
    <mdb-list-group-item social iconColor="secondary-color-dark" fab icon="snapchat">Vacation</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

List icons with rounded icons

Photos

Work

Vacation

<template>
  <mdb-list-group flush>
    <mdb-list-group-item social circle far iconColor="grey" icon="image">Photos</mdb-list-group-item>
    <mdb-list-group-item social circle iconColor="grey" icon="briefcase">Work</mdb-list-group-item>
    <mdb-list-group-item social circle iconColor="grey" icon="anchor">Vacation</mdb-list-group-item>
  </mdb-list-group>
</template>
<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
  export default {
    name: 'HorizontalListPage',
    components: {
      mdbListGroup,
      mdbListGroupItem
    }
  }
</script>

Vue List Group - API

In this section you will find advanced information about the List Group component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

<script>
  import { mdbListGroup, mdbListGroupItem } from 'mdbvue';
</script>

API Reference: Properties - List Group

Name Type Default Description Example
tag String 'ul' Changes list group's wrapper tag <mdb-list-group tag="div" />
horizontal Boolean false Changes list group's display to horizontal at all breakpoints. <mdb-list-group horizontal />
sm Boolean false Changes list group's display to horizontal at the 'sm' breakpoint. <mdb-list-group horizontal sm />
md Boolean false Changes list group's display to horizontal at the 'md' breakpoint. <mdb-list-group horizontal md />
lg Boolean false Changes list group's display to horizontal at the 'lg' breakpoint. <mdb-list-group horizontal lg />
xl Boolean false Changes list group's display to horizontal at the 'xl' breakpoint. <mdb-list-group horizontal xl />
flush Boolean false Removes list's borders <mdb-list-group flush />

API Reference: Properties - List Group Item

Name Type Default Description Example
tag String 'li' Changes list group item's wrapper tag <mdb-list-group-item tag="div" />
action Boolean false Changes list group item's styling to action <mdb-list-group-item action />
disabled Boolean false Disables the element <mdb-list-group-item disabled />
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) <mdb-list-group-item color="danger" />
justifyContentBetween Boolean true Changes the css propertyjustify-content to between value <mdb-list-group-item :justify-content-between="false" />
alignItemsCenter Boolean true Changes the css propertyalign-items to center value <mdb-list-group-item :align-items-center="false" />
icon String Sets the list group item's icon <mdb-list-group-item icon="paper-plane" />
social Boolean false Changes icon styling to social <mdb-list-group-item icon="paper-plane" social />
circle Boolean false Changes social icon's shape to circle <mdb-list-group-item icon="paper-plane" social circle />
iconColor String 'default-color' Changes social icon's background to the given color <mdb-list-group-item icon="paper-plane" social iconColor="pink" />
far Boolean false Changes icon's style to regular <mdb-list-group-item icon="..." far />
regular Boolean false Changes icon's style to regular <mdb-list-group-item icon="..." regular />
light Boolean false Changes icon's style to light <mdb-list-group-item icon="..." light />
fal Boolean false Changes icon's style to light <mdb-list-group-item icon="..." fal />
fab Boolean false Changes icon's style to brands <mdb-list-group-item icon="..." fab />
brands Boolean false Changes icon's style to brands <mdb-list-group-item icon="..." brands />
fad Boolean false Changes icon's style to duotone <mdb-list-group-item icon="..." fad />
duotone Boolean false Changes icon's style to duotone <mdb-list-group-item icon="..." duotone />