Badges offer a simple and convenient way of labelling elements.


Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Use .badge to create a badge:

Article title Promoted

Article title Promoted

Article title Promoted

<h1 class="my-4">Article title <span class="badge align-middle">Promoted</span></h1>
<h2 class="my-4">Article title <span class="badge align-middle">Promoted</span></h2>
<h3 class="my-4">Article title <span class="badge align-middle">Promoted</span></h3>

Use .badge-* modifier classes to change the appearance of a badge:

New Open Answered Hold Solved Closed
<span class="badge badge-new">New</span>
<span class="badge badge-open">Open</span>
<span class="badge badge-answered">Answered</span>
<span class="badge badge-hold">Hold</span>
<span class="badge badge-solved">Solved</span>
<span class="badge badge-closed">Closed</span>

Use .rounded and .px-2 utilities to make badges rounded:

New Open Answered Hold Solved Closed
<span class="badge badge-new rounded px-2">New</span>
<span class="badge badge-open rounded px-2">Open</span>
<span class="badge badge-answered rounded px-2">Answered</span>
<span class="badge badge-hold rounded px-2">Hold</span>
<span class="badge badge-solved rounded px-2">Solved</span>
<span class="badge badge-closed rounded px-2">Closed</span>

Use contextual .badge-* classes on a <a> element to create actionable badges with hover and focus states.

<a href="#" class="badge badge-new">New</a>
<a href="#" class="badge badge-open">Open</a>
<a href="#" class="badge badge-answered">Answered</a>
<a href="#" class="badge badge-hold">Hold</a>
<a href="#" class="badge badge-solved">Solved</a>
<a href="#" class="badge badge-closed">Closed</a>

Badges can be used as part of links or buttons to provide a counter.

<button type="button" class="button button-primary">
  Profile <span class="badge badge-white ml-1">9</span>
  <span class="sr-only">unread messages</span>


Use the badge-variant Sass mixin to create your own badge variants.

For example, the following Sass code creates a new purple badge (.badge-purple):

.badge-purple {
  @include badge-variant(#4329d4);