BootstrapVue List Group

-
Pro Component

List groups are a flexible and powerful component for displaying a series of content. With BootstrapVue list group you can modify and extend them to support just about any content within.


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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>

Active items

Add .active to a .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
<b-list-group>
  <b-list-group-item active>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>
<b-list-group>
  <b-list-group-item href="javascript:;" active>Cras justo odio</b-list-group-item>
  <b-list-group-item href="javascript:;">Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item href="javascript:;">Morbi leo risus</b-list-group-item>
  <b-list-group-item href="javascript:;">Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item href="javascript:;">Vestibulum at eros</b-list-group-item>
</b-list-group>

With badges

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
<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>

Advanced Examples

Here are some more advanced custom examples we’ve made in order to bring more functionality with some really cool list group examples.

Members

<b-list-group flush class="list my--3">
    <b-list-group-item v-for="member in members"
        :key="member.image"
        class="list-group-item px-0">
        <b-row align-v="center" >
            <b-col md="auto">
                <!-- Avatar -->
                <a href="javascript:;" class="avatar">
                    <b-img rounded="circle" alt="Image placeholder" :src="member.image" />
                </a>
            </b-col>
            <b-col class="ml--2">
                <h4 class="mb-0">
                    <a href="javascript:;"></a>
                </h4>
                <span :class="`text-${member.statusType}`"></span>
                <small></small>
            </b-col>
            <b-col md="auto">
                <b-button type="button" size="sm" variany="primary">Add</b-button>
            </b-col>
        </b-row>
    </b-list-group-item>
</b-list-group>


<script>
  export default {
    name: 'members-card',
    data() {
      return {
        membersSearch: '',
        members: [
          {
            name: 'John Michael',
            status: 'Online',
            statusType: 'success',
            image: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-1.jpg'
          },
          {
            name: 'Alex Smith',
            status: 'In a meeting',
            statusType: 'danger',
            image: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-2.jpg'
          },
          {
            name: 'Samantha Ivy',
            status: 'Offline',
            statusType: 'danger',
            image: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-3.jpg'
          },
          {
            name: 'John Michael',
            status: 'Online',
            statusType: 'success',
            image: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg'
          },
          {
            name: 'John Snow',
            status: 'Online',
            statusType: 'success',
            image: 'https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-5.jpg'
          }
        ]
      }
    }
  }
</script>

Checklist

  • Call with Dave
    10:30 AM
  • Lunch meeting
    10:30 AM
  • Argon Dashboard Launch
    10:30 AM
  • Winter Hackaton
    10:30 AM
  • Dinner with Family
    10:30 AM
<b-list-group flush data-toggle="checklist">
  <b-list-group-item class="checklist-entry flex-column align-items-start py-4 px-4"
      v-for="item in items"
      :key="item.title"
  >
    <div class="checklist-item"
         :class="{'checklist-item-checked': item.done, [`checklist-item-${item.checkType}`]: item.checkType}">
      <div class="checklist-info">
        <h5 class="checklist-title mb-0"></h5>
        <small></small>
      </div>
      <div>
        <b-form-checkbox v-model="item.done"
                      :class="`custom-checkbox-${item.checkType}`"/>
      </div>
    </div>

  </b-list-group-item>
</b-list-group>

<script>
  export default {
    data() {
      return {
        items: [
          {
            title: 'Call with Dave',
            description: '10:30 AM',
            done: true,
            checkType: 'success'
          },
          {
            title: 'Lunch meeting',
            description: '10:30 AM',
            done: false,
            checkType: 'warning'
          },
          {
            title: 'Argon Dashboard Launch',
            description: '10:30 AM',
            done: false,
            checkType: 'info'
          },
          {
            title: 'Winter Hackaton',
            description: '10:30 AM',
            done: true,
            checkType: 'danger'
          },
          {
            title: 'Dinner with Family',
            description: '10:30 AM',
            done: true,
            checkType: 'success'
          }
        ]
      };
    }
  };
</script>

Progress

  • Argon Design System
  • Angular Now UI Kit PRO
  • Black Dashboard
  • React Material Dashboard
  • Vue Paper UI Kit PRO
<b-list-group flush class="list my--3">
  <b-list-group-item v-for="(item, index) in list"
      :key="index"
      class="px-0">
    <b-row align-v="center">
      <b-col md="auto" >
        <!-- Avatar -->
        <a href="javascript:;" class="avatar rounded-circle">
          <img alt="Image placeholder" :src="item.image">
        </a>
      </b-col>
      <b-col >
        <h5></h5>
        <base-progress class="progress-xs mb-0"
                       :type="item.color"
                       :value="item.progress">

        </base-progress>
      </b-col>
    </b-row>
  </b-list-group-item>
</b-list-group>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: 'Argon Design System',
            image: 'img/theme/bootstrap.jpg',
            color: 'orange',
            progress: 60,
          },
          {
            name: 'Angular Now UI Kit PRO',
            image: 'img/theme/angular.jpg',
            color: 'green',
            progress: 100,
          },
          {
            name: 'Black Dashboard',
            image: 'img/theme/sketch.jpg',
            color: 'red',
            progress: 72
          },
          {
            name: 'React Material Dashboard',
            image: 'img/theme/react.jpg',
            color: 'teal',
            progress: 90
          },
          {
            name: 'Vue Paper UI Kit PRO',
            image: 'img/theme/vue.jpg',
            color: 'green',
            progress: 100
          },
        ]
      }
    }
  }
</script>

Messages

<b-list-group flush>
  <b-list-group-item href="javascript:;" class=" flex-column align-items-start py-4 px-4">
    <div class="d-flex w-100 justify-content-between">
      <div>
        <div class="d-flex w-100 align-items-center">
          <img src="img/theme/team-1.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2">
          <h5 class="mb-1">Tim</h5>
        </div>
      </div>
      <small>2 hrs ago</small>
    </div>
    <h4 class="mt-3 mb-1"> New order for Argon Dashboard</h4>
    <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </b-list-group-item>
  <b-list-group-item  href="javascript:;" class="flex-column align-items-start py-4 px-4">
    <div class="d-flex w-100 justify-content-between">
      <div>
        <div class="d-flex w-100 align-items-center">
          <img src="img/theme/team-2.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2">
          <h5 class="mb-1">Mike</h5>
        </div>
      </div>
      <small>1 day ago</small>
    </div>
    <h4 class="mt-3 mb-1"><span class="text-info"></span> Your theme has been updated</h4>
    <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </b-list-group-item>
</b-list-group>
<b-list-group-item href="javascript:;" class=" flex-column align-items-start py-4 px-4">
  <div class="d-flex w-100 justify-content-between">
    <div>
      <div class="d-flex w-100 align-items-center">
        <img src="img/theme/team-1.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2">
        <h5 class="mb-1">Tim</h5>
      </div>
    </div>
    <small>2 hrs ago</small>
  </div>
  <h4 class="mt-3 mb-1"> New order for Argon Dashboard</h4>
  <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</b-list-group-item>

Notifications

<b-list-group flush>
  <b-list-group-item action href="javascript:;">
    <b-row align-v="center" >
      <b-col md="auto">
        <!-- Avatar -->
        <b-img alt="Image placeholder" src="img/theme/team-1.jpg" class="avatar" rounded="circle" />
      </b-col>
      <b-col class="ml--2">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="mb-0 text-sm">John Snow</h4>
          </div>
          <div class="text-right text-muted">
            <small>2 hrs ago</small>
          </div>
        </div>
        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
      </b-col>
    </b-row>
  </b-list-group-item>
  <a href="javascript:;" class="list-group-item list-group-item-action">
    <b-row align-v="center">
      <b-col md="auto">
        <!-- Avatar -->
        <b-img alt="Image placeholder" src="img/theme/team-2.jpg" class="avatar" rounded="circle" />
      </b-col>
      <b-col class="ml--2">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="mb-0 text-sm">John Snow</h4>
          </div>
          <div class="text-right text-muted">
            <small>3 hrs ago</small>
          </div>
        </div>
        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
      </b-col>
    </b-row>
  </a>
<b-list-group-item action href="javascript:;" >
    <b-row align-v="center">
      <b-col md="auto">
        <!-- Avatar -->
        <b-img alt="Image placeholder" src="img/theme/team-3.jpg" class="avatar" rounded="circle" />
      </b-col>
      <b-col class="ml--2">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="mb-0 text-sm">John Snow</h4>
          </div>
          <div class="text-right text-muted">
            <small>5 hrs ago</small>
          </div>
        </div>
        <p class="text-sm mb-0">Your posts have been liked a lot.</p>
      </b-col>
    </b-row>
  </b-list-group-item>
</b-list-group>

Countries

  • Country flag
    Country:
    United States
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    Country:
    Germany
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    Country:
    Great Britain
    Visits:
    2500
    Bounce:
    30%
<b-list-group flush class="list my--3">
  <b-list-group-item class="px-0">
    <b-row align-v="center" >
      <b-col md="auto">
        <!-- Country flag -->
        <img src="img/icons/flags/US.png" alt="Country flag">
      </b-col>
      <b-col>
        <small>Country:</small>
        <h5 class="mb-0">United States</h5>
      </b-col>
      <b-col>
        <small>Visits:</small>
        <h5 class="mb-0">2500</h5>
      </b-col>
      <b-col>
        <small>Bounce:</small>
        <h5 class="mb-0">30%</h5>
      </b-col>
    </b-row>
  </b-list-group-item>
  <b-list-group-item class="px-0">
    <b-row align-v="center">
      <b-col md="auto">
        <!-- Country flag -->
        <img src="img/icons/flags/DE.png" alt="Country flag">
      </b-col>
      <b-col>
        <small>Country:</small>
        <h5 class="mb-0">Germany</h5>
      </b-col>
      <b-col>
        <small>Visits:</small>
        <h5 class="mb-0">2500</h5>
      </b-col>
      <b-col>
        <small>Bounce:</small>
        <h5 class="mb-0">30%</h5>
      </b-col>
    </b-row>
  </b-list-group-item>
  <b-list-group-item class="px-0">
    <b-row align-v="center">
      <b-col md="auto">
        <!-- Country flag -->
        <img src="img/icons/flags/GB.png" alt="Country flag">
      </b-col>
      <b-col>
        <small>Country:</small>
        <h5 class="mb-0">Great Britain</h5>
      </b-col>
      <b-col>
        <small>Visits:</small>
        <h5 class="mb-0">2500</h5>
      </b-col>
      <b-col>
        <small>Bounce:</small>
        <h5 class="mb-0">30%</h5>
      </b-col>
    </b-row>
  </b-list-group-item>
</b-list-group>

If you want to see more examples and properties please check the official BootstrapVue Documentation.