Badges

Basic

Use .badgewith .badge-{color}classes to set a badge's style defined with $theme-colorsmapped in src/sass/components/_variables.scss:

White Primary Light Secondary Success Info Warning Danger Dark

<span class="badge badge-white">White</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-light">light</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-dark">Dark</span>

Circle Badge

Use .badge-circleclass to use a badge with circle style:

5 5 5 5 5 5 5 5 5

<span class="badge badge-circle badge-white">5</span>
<span class="badge badge-circle badge-primary">5</span>
<span class="badge badge-circle badge-light">5</span>
<span class="badge badge-circle badge-secondary">5</span>
<span class="badge badge-circle badge-success">5</span>
<span class="badge badge-circle badge-info">5</span>
<span class="badge badge-circle badge-warning">5</span>
<span class="badge badge-circle badge-danger">5</span>
<span class="badge badge-circle badge-dark">5</span>

Size Options

Use .badge-smor .badge-lgto change Badge size according to the Bootstrap standards:

Primary 3 4

<span class="badge badge-primary badge-sm">Primary</span>
<span class="badge badge-primary badge-circle badge-sm">3</span>
<span class="badge badge-primary badge-square badge-sm">4</span>

<span class="badge badge-primary badge">Primary</span>
<span class="badge badge-primary badge-circle">3</span>
<span class="badge badge-primary badge-square ">4</span>

<span class="badge badge-primary badge-lg">Primary</span>
<span class="badge badge-primary badge-circle badge-lg">3</span>
<span class="badge badge-primary badge-square badge-lg">4</span>

Inside Button

Use a badge with .badge-circleclasses inside button:


<button class="btn btn-primary me-5">
Primary <span class="badge badge-circle badge-light-primary text-primary ms-2">5</span>
</button>
<button class="btn btn-secondary me-5">
Secondary <span class="badge badge-circle badge-light-primary text-primary ms-2">5</span>
</button>
<button class="btn btn-success me-5">
Success <span class="badge badge-circle badge-light-success text-success ms-2">4</span>
</button>
<button class="btn btn-danger me-5">
Danger <span class="badge badge-circle badge-light-danger text-danger ms-2">4</span>
</button>
<button class="btn btn-warning me-5">
Warning <span class="badge badge-circle badge-light-warning text-dark ms-2">3</span>
</button>