Bootstrap 4 Badges


Basic Badges

A badge is used in Bootstrap to provide additional information inside a content. You will need a .badge class to use it.

This is a badge

Example code

<h3>This is a <span class="badge badge-info">badge</span></h3>

Badge with Contextual Classes

Many contextual classes can be used on bootstrap badges. These allow you to change the background-color and text-color of the badges. The contextual classes are .badge-primary, .badge-secondary, .badge-info, .badge-success, .badge-warning, .badge-danger, .badge-dark, .badge-light.

Primary Secondary Info Success Warning Danger Dark Light

Example code

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

Pill Badge

The pill-badge in bootstrap is normally a badge with all the properties it has, only the border-radius is added and the badge is rounded. You must use the .badge-pill class to use it.

The following example shows the size of these three button groups:

Primary Secondary Info Success Warning Danger Dark Light

Example code

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-success">Success</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-dark">Dark</span>
<span class="badge badge-pill badge-light">Light</span> 

Badge inside the Button

Badge class can be inserted inside any of the elements in the bootstrap. The following example shows a badge inserted inside a button:

Example code

<button class="btn btn-primary active">Notification <span class="badge badge-dark">5</span>
</button>

Badge Positioning

A badge can be placed in any position. For that you have to use normal css. The positioning of some of the following badges is shown :

Example code

<button class="btn btn-primary p-3" style="position: relative;">
Notifications
<span class="badge badge-dark" style="position: absolute;top:0;left: 0;">2</span>
</button>
<button class="btn btn-primary p-3" style="position: relative;">
Notifications
<span class="badge badge-dark" style="position: absolute;top:0;right: 0;">2</span>
</button>