Bootstrap 4 Badges Component Intro

The labels or badges can be used for showing some additional information, count etc. related to the specific content. For example, showing the count of inbox messages ahead of “Message” text. Similarly, showing a distinct “New Arrival” label ahead of new products launched on your website etc.

In Bootstrap 4, the badges can be created by using .badge class and to color the badge or label, use the contextual classes of the badge e.g. .badge-success, badge-primary.

Keep reading the next section for looking at the live demos of creating badges in different colors and sizes and in various components.

The demo of simple badge in Bootstrap 4

Let me start by creating simple badges ahead of text by using .badge class. The .badge class along with a contextual class is used in a <span> tag (an inline HTML element). So, the content/text used in the span appears inline with main content and styled as rectangle box.

See the following example where badges are attached with the h1 to h6 headings:

See online demo and code

Did you notice in the example, all badges though used the same classes, however, their size varies according to the size of parent elements. This is due to using relative font sizing and em units.

The markup of badges demo:

Creating colored badges by using other contextual classes

The following example shows using the other built-in contextual classes for displaying badges in various colors. These contextual classes for badges include:

• badge-dark
• badge-secondary
• badge-warning
• badge-light
• badge-success
• badge-danger
• badge-primary
• badge-info

See the demo below where all these classes are used:

See online demo and code

The markup:

The example of creating rounded labels

The Bootstrap 4 has another built-in class for creating rounded badges. The class name is .badge-pill that you may use in addition to the .badge and .badge-[context] classes. Have a look at the demo for experiencing it:

See online demo and code

The markup with badge-pill class:

Using badge in buttons example

Until now, we have seen using badges in headings and <div> tags. You may also use Bootstrap badges in buttons and links.

In the buttons demo below, various buttons are given their own contextual classes while badges are created by <span> tags, as in above examples. For each badge, the contextual class is also used along with .badge-pill in two buttons:

See online demo and code

The code:

Using badges in dropdown buttons example

Similarly, you may use badges in the button dropdowns in Bootstrap. Have a look:

See online demo and code

Get the complete code from the demo page.

Note: you need to include the Bootstrap JS, popper.js along with jQuery in order to create the dropdowns.

Using badge Bootstrap classes in links

You may also use badge classes in <a> links. In that case, you may create actionable badges with various colors and hovering effects.

Have a look at this demo where I replaced <span> tags in one of the above examples by <a>s and used the badge classes:

See online demo and code

The code:

See the links in action with complete code in the example page.

Using badges in navbar with sup and sub tags

The badges can also be added in the navbar. This can be useful for different situations like adding a new menu item and showing it as “new” or “hot” or some other information.

Moreover, you may use the <sup> and <sub> tags of HTML for displaying badges as superscripts or subscripts and navbars can be an ideal place for that.

This is what I am going to show you in the next example. A navbar is created with a few menu items that contain badges with <sub> and <sup> tags:

See online demo and code

The markup for the navbar with badges:

See the output and code on the example page.

The example of badges in list groups

The final example shows using the badges in the Bootstrap list group. For that, a list is created by using various contextual classes of the list in Bootstrap. With each list item, a badge is also created with its own context class:

See online demo and code

You may grab the complete code from the demo page.