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.

Example

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

<h3>25 Tips for Tying Your Shoelace <span class="badge badge-primary">New</span></h3>

Contextual Classes

The following contextual classes are available for badges.

<span class="badge badge-primary">Primary</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-light">Light</span>
<span class="badge badge-dark">Dark</span>

Pill Badges

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

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

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.