Bootstrap 4 Badges

Append and highlight additional information to a string of text with a stylized badge.

Bootstrap's badge classes can be used to highlight additional information that's appended to a string of text.

To create a badge, apply the .badge class, as well as one of the .badge-* classes to the <span> element that represents the badge.


Here we create a default badge by using class="badge badge-primary".

Contextual Classes

The following contextual classes are available for badges.

Pill Badges

Make the corners more rounded with Bootstrap's .badge-pill class.

New in Bootstrap 4

  • Bootstrap 3 uses labels and badges, each for a slightly different purpose.
  • In Bootstrap 4, badges do what labels used to do in Bootstrap 3. Bootstrap 4 also introduced the .badge-pill class to provide rounded corners.