Bootstrap 4 Badges

Bootstrap 4 Badges is used to add useful information to content like notification counters, the number of messages on your email inbox, and others.

In this tutorial, you will learn all types of badges you can create using Bootstrap 4. Below are useful examples of notification counters, badges contextual classes, rounded shape badges, and badges with links.

Use Bootstrap 4 Badges

You can add badges to headings that scale according to the size of the specified element. To create badges, add the class .badge with the contextual class (like .badge-secondary) to the <span> element as given below:

Output

The above example showing the headings with rectangular shape badges that match the size of the element.

Buttons with Badges to Display Counter

You can add badges to buttons that are useful to create notification counters. Create a badge using class .badge with the contextual class (like .badge-light) to the <span> and add it inside the button as given below:

Output

The above example shows the button that contains a number as a counter to display a number of notifications on dashboards.

Contextual Classes to Change Appearance of Badges

You can change the appearance of badges using the Bootstrap 4 contextual classes. To change the appearance, add the base class .badge with any of the contextual classes (.badge-*) as given below:

Output

The above example shows that there is a total of 8 colors for each badge that you create in Bootstrap 4.

Pill Badges for More Rounded Shape in Bootstrap 4

Pill badges are useful to create rounded shape badges. To create pill badge, you have to add class .badge-pill with the base class .badge and any of the contextual classes (like .badge-primary) to the <span> element as given below:

Output

The above example shows the different appearance with rounded shapes using the pill badge class .badge-pill.

Badges with Links in Bootstrap 4

In addition to the above all badge types, you can also add links to each badge in Bootstrap 4. To create a badge with links, you have to add the base class .badge with the contextual class (like .badge-primary) to the anchor (<a>) element as given below:

Output