Bootstrap 4 Badges

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 .badge class along with any contextual class (like .badge-primary) to the <span> element base 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 now

Source Code

Try it now

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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

General Syntax

Try it now

Source Code

Try it now

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 .badge followed by .badge-pill to 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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Success Danger Dark

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

Bootstrap 4 Badges With Pills Links

To provide actionable badge, you have to add contextual class .badge-* to the <a> element base class. It 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 now

Source Code

Try it now

Source Code : Output

This is actionable Success Badge.
This is actionable Danger badge

Note: Bootstrap 4 actionable badges and pills specify hyperlink action. It shows internal or external link.

Online Test / Quiz