Badges

Contrast Bootstrap Badge component is a small count and labeling component.

Examples

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

html

  <button class="btn btn-dark">
    Notifications
    <span class="badge bg-light text-dark ml-2">4</span>
  <span class="badge bg-primary">Primary</span>
  <span class="badge bg-secondary">Secondary</span>
  <span class="badge bg-success">Success</span>
  <span class="badge bg-danger">Danger</span>
  <span class="badge bg-warning text-dark">Warning</span>
  <span class="badge bg-info">Info</span>
  <span class="badge bg-light text-dark">Light</span>
  <span class="badge bg-dark text-light">Dark</span>

Pill Badges

Set the borderType property to pill to make badges more rounded.

html

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

Contextual Variations

Add any of the below mentioned properties to change the appearance of a badge.

html

<span class="badge badge-lg bg-primary">Large</span>
<span class="badge bg-secondary">Normal</span>
<span class="badge badge-sm bg-success">Small</span>

Flat Badges

Add the flat property to change the appearance of a badge.

html

<span class="badge badge-flat bg-dark">Flat Badge</span>

Badges with Icons

Pro Component

html

<span class="badge bg-primary"><i class="fa fa-facebook"></i></span>
<span class="badge bg-secondary"
><i class="fa fa-snapchat-ghost"></i
></span>
<span class="badge bg-success"><i class="fa fa-anchor"></i></span>
<span class="badge bg-danger"><i class="fa fa-twitter"></i></span>
<span class="badge bg-warning text-dark"
><i class="fa fa-bomb"></i
></span>
<span class="badge bg-info"><i class="fa fa-heart"></i></span>
<span class="badge bg-light text-dark">
<i class="fa fa-btc"></i>
</span>
<span class="badge bg-dark text-light"
><i class="fa fa-apple"></i
></span>

Autocomplete

Breadcrumb