Badge

Badge is designed to show short text in notifications.

Badge Styles

Badge

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>

Align to Baseline

If you want a badge aligned to text baseline, replace the .badge class with the .badge-baseline class.

<button class="btn btn-hollow-primary">
  Messages <span class="badge-baseline">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-baseline c-dark bc-light">99+</span>
</button>

Sass Variables

Size

$badge-offset-top-em: -0.4em !default

$badge-offset-left-em: 0.4em !default

$badge-height-em: 1.2em !default

$badge-padding-em: 0.4em !default

Others

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

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