Bootstrap 4 Badges
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 Bootstrap 4 badges :
- Badges can be created very easily by adding
.badgeclass along with any contextual class (like.badge-primary)to thebase class. - 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 success badge Learn
General Syntax
Try it nowSource Code
Source Code : Output
This is an example of badge Read
This is another example of badge Read
This is last example of badge Read
Note:
Add,.badge & .badge-* contextual classes to the <span> base class.
Attention: Badge is used to provide additional information about the specific content hence widely used.
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
General Syntax
Try it nowSource Code
Source Code : Output
This is a success badge: Success
This is a danger badge:Danger
This is a warning badge:Warning
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
-
Add
.badgefollowed by.badge-pillto the<span>element base class. -
Add one of the badge contextual classes to the
<span>element base class. -
Followings are the predefined badge contextual classes:
.badge-primary,.badge-success,.badge-secondary,.badge-warning,.badge-danger,.badge-info,.badge-light,.badge-dark.
Example
General Syntax
Try it nowSource Code
Source Code : Output
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 <a>
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
Try it nowSource Code
Source Code : Output
Note: Bootstrap 4 actionable badges and pills specify hyperlink action. It shows internal or external link.