Bootstrap 4 Badge Tutorial

Badges are text boxes with background colors used for different purposes. From end user perspective generally these badges are used for highlighting specific content within a block of text. Administrators use badges to showcase pending tasks something like a notification shown on iOS apps. Bootstrap allows to create badges in three simple ways. Let us explain all three ways in this tutorial.

View Demo of Badges

Default Bootstrap Badges

The “badge” class is the base CSS class should be used to identify a HTML element as a badge. This can be used on text elements like headings and paragraph to add a label next to the content. Below is the code for creating default badges in Bootstrap 4 next to the headings.

The default Bootstrap badges will look like below:

Bootstrap Contextual Color Badges

The default badge will have light grey color. But you don’t need to settle with only one color – Bootstrap 4 allows you to use contextual classes to add many more colors with primary, secondary, success, info, warning, danger, light and dark like below.

The code the contextual badges is given below:

Bootstrap Contextual Color Pill Badges

By default the badges are in square shape with slight radius in the corners. If you want rounded corner badges in pill shape then just use “badge-pill” class like below:

The pill badges will look like below on browser:

Badge with Counter

The Bootstrap version 4.0 allows you to create badges with counters by default as shown below.

Below is the code for badge with counter:

That’s Not All

It is not necessary to use badges at the end of text content. Actually you can use in-between the paragraph like a text highlighter.

Also you can add font awesome icons in front and use it like a buttons with icons. Remember, you should link font awesome CSS in your page for using these icons.

It will produce the result like below on the browser:

View Demo of Badges