Badge

Badge is designed to show short text in notifications.

Examples

Badge is simple to create, just add the .badge class to an inline element. Let’s see the below examples.

You have new messages 8

<p>
  You have new messages <span class="badge">8</span>
</p>

<button class="btn btn-hollow-primary">
  Messages <span class="badge">22</span>
</button>

Colors and Backgrounds

Change the color and background of the badge with color utilities and background utilities.

<button class="btn btn-dark">
  Messages <span class="badge c-dark bc-light">99+</span>
</button>

Sass Variables

Size

$badge-margin-left-em: 0.5em !default

$badge-horizontal-padding-em: 0.4em !default

Others

$badge-background: $background-color-primary !default

$badge-color: $color-inverse-emphasis !default