BootstrapVue — Customizing List Groups

To make good looking Vue apps we need to style our components. To make our lives easier we can use components with styles built-in. In this article, we’ll look at how to add list groups.

Disabled Items

We can disable list group items by adding the disabled prop.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item disabled>foo</b-list-group-item>  
      <b-list-group-item>bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Then we’ll see the first item grayed out.

Actionable List Group Items

We can add the href prop to a list group item.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item href="http://example.com">foo</b-list-group-item>  
      <b-list-group-item href="http://medium.com">bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Then we can go to the websites that are added to the href prop.

We can change the list group item to a button by using the button prop.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item button>foo</b-list-group-item>  
      <b-list-group-item button>bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Now the items are displayed as buttons.

Styling Variants

We can add the variant prop to change the styling variant of the list group item.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item variant="success">foo</b-list-group-item>  
      <b-list-group-item>bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We set the value of variant to 'success' .

Then we’ll see that it’s green.

Possible values include primary , secondary , success , danger , warning , info , light , and dark .

Add Badges

We can add badged to a list group item by using the b-badge component.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item>foo  
        <b-badge variant="primary" pill>14</b-badge>  
      </b-list-group-item>  
      <b-list-group-item>bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We have the variant prop on b-badge like we have on list-group-items .

The possible values are the same.

pill makes the badge look like a pill.

primary makes the badge blue.

Inside Cards

We can put lust groups inside a card.

To remove the border from the list group, we can add the flush prop.

For instance, we can write:

<template>  
  <div id="app">  
    <b-card header="Card">  
      <b-list-group>  
        <b-list-group-item href="#">foo</b-list-group-item>  
        <b-list-group-item href="#">bar</b-list-group-item>  
      </b-list-group>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

or:

<template>  
  <div id="app">  
    <b-card header="Card">  
      <b-list-group flush>  
        <b-list-group-item href="#">foo</b-list-group-item>  
        <b-list-group-item href="#">bar</b-list-group-item>  
      </b-list-group>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Horizontal List Groups

The list group can be made horizontal.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group horizontal>  
      <b-list-group-item href="#">foo</b-list-group-item>  
      <b-list-group-item href="#">bar</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Then we can see list group items side by side.

Custom Content

We can add anything inside a list group item.

For example, we can write:

<template>  
  <div id="app">  
    <b-list-group>  
      <b-list-group-item href="#">  
        <h5 class="mb-1">Foo</h5>  
        <small class="text-muted">3 days ago</small>  
      </b-list-group-item>  
      <b-list-group-item href="#">  
        <h5 class="mb-1">Bar</h5>  
        <small class="text-muted">3 days ago</small>  
      </b-list-group-item>  
    </b-list-group>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We add come utility classes to our content which we nest inside the b-list-group-item .

Conclusion

We can customize list group items so that they are horizontal. Also, we can add badges or any other content we want. List groups can also be put inside cards.