Badge

Badge component is slightly modified to make it more beautiful. Let's have a glance.

Badge Light Color

We have added light background color badges in our template. You have to pass light-{color} value to variant prop.

<b-badge variant="light-primary">Primary</b-badge>
<b-badge variant="light-secondary">Secondary</b-badge>
<b-badge variant="light-success">Success</b-badge>
<b-badge variant="light-danger">Danger</b-badge>
<b-badge variant="light-warning">Warning</b-badge>
<b-badge variant="light-info">Info</b-badge>
<b-badge variant="light-dark">Dark</b-badge>

Result:

Badge Glow

You can add shadow with badges. You have to use custom class badge-glow .

<b-badge variant="primary" class="badge-glow">Primary</b-badge>
<b-badge class="badge-glow">Secondary</b-badge>
<b-badge variant="success" class="badge-glow">Success</b-badge>
<b-badge variant="danger" class="badge-glow">Danger</b-badge>
<b-badge variant="warning" class="badge-glow">Warning</b-badge>
<b-badge variant="info" class="badge-glow">Info</b-badge>
<b-badge variant="dark" class="badge-glow">Dark</b-badge>

Result:

Block Badge

Use .d-block class with <b-badge>, to display badge as a block element.

<b-badge class="d-block" variant="primary">Badge</b-badge>

Result: