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 badges, breadcrumbs, and buttons with BootstrapVue.

Badges

Badges are small tags for adding context to any content.

We can use it by using the b-badge component:

<template>
  <div id="app">
    <h2>Feature
      <b-badge>New</b-badge>
    </h2>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We just add it straight into the template without any props.

There are variations like primary , secondary , etc.

We can add the variant prop to set the variant.

For instance, we can write:

<template>
  <div id="app">
    <b-badge variant="primary">New</b-badge>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Pill badges are badges that are more rounded than usual.

We just add the pill prop:

<template>
  <div id="app">
    <b-badge pill variant="primary">Primary</b-badge>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

#javascript #bootstrap