Bootstrap 4 Badges

Generally, Bootstrap 4 badges are used to provide additional information to the respective content. Please keep in mind that badges scale up to match the size of the immediate parent element using relative font size emp units.

Process to create a badge :

Step 1:Badges can be created very easily by adding .badge class along with any contextual class (like .badge-primary)to the base class.
Step 2: Followings are the badge contextual classes: .badge-primary, .badge-success, .badge-secondary, .badge-warning, .badge-danger, .badge-info, .badge-light, .badge-dark.

Badge Example

This is an example of badge : Learn bootstrap

Attention: It is used to provide additional information about the specific content hence widely used.

Example

Source Code

	
		<div class="container my-4">
 <h2>This is an example of a badge<span class="badge">Read</span></h2>
 <h2>This is another example of a badge <span class="badge">Read</span></h2>
</div>

Try it yourself

Note: Add,.badge & .badge-* contextual classes to the <span> base class.

Contextual Badges

To provide the additional appearance of the available badge, please add one of the contextual classes (.badge-*)to change the badge color.

Example Primary Secondary Success Danger Warning Info Light Dark

Source Code

	
		<div class="container mt-5">
  <span class="badge badge-primary my-3">Primary</span>
  <span class="badge badge-secondary my-3">Secondary</span>
  <span class="badge badge-success my-3">Success</span>
</div>

Try it yourself

Note: Badge, contextual classes are used to provide different color to the badge. These contextual class (badge-*) is used along with .badge.

Pill Badges

To create pill badge,follow the below given steps

Step1: Add .badge followed by .badge-pill to the <span> element base class.
Step2:Add one of the badge contextual classes to the <span> element base class.
Step3:Followings are the predefined badge contextual classes: .badge-primary, .badge-success, .badge-secondary, .badge-warning, .badge-danger, .badge-info, .badge-light, .badge-dark.

Example Primary Badge Secondary Success badge pill Danger badge pill Warning badge pill Info badge pill Light badge pill Dark badge pill

Source Code

	
		<div class="container my-5">
  <span class="my-4 badge badge-pill badge-primary">Primary Badge</span>
  <span class="my-4 badge badge-pill badge-secondary">Secondary</span>
  <span class="my-4 badge badge-pill badge-success">Success badge pill</span>
</div>
<!--/container-->

Try it yourself

Note: To create more rounded badges, use .badge-pill modifier. It creates larger border-radius and extra horizontal padding.

Badge & Pills Links

To provide actionable badge,you have to add contextual class.badge-* to the element base class.This provides actionable badges with hover and focus states.

Example

This is actionable Primary Badge.

This is actionable Secondary badge

This is actionable Success badge

This is actionable Danger badge

This is actionable Warning badge

This is actionable Info badge

This is actionable Light badge

This is actionable Dark badge

General Syntax

		<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>

Try It Now

Source Code

	
		<h4 class="my-4">This is actionable<a href="#" class="badge badge-success">Success</a> badge</h4>
<h4 class="my-4">This is actionable<a href="#" class="badge badge-danger">Danger</a> badge</h4>

Try it yourself

Note: Actionable badge and pills are the specifies hyperlink action. It shows internal or external link.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS