Bootstrap 5 Badge

Bootstrap 5 Badges

Bootstrap 5 badges are used to assign additional information to the content such as warning messages, notifications, headings, etc. It scales up to match the size of the immediate parent element using relative font size emp units.

Steps To Create Bootstrap 5 Badges

  • Add .badge i.e(badge class) together with contextual badge class like(.badge-secondary) to <span> base class to create rectangular box i.e (badge).

General Syntax For Badge

<span class="badge badge-*">Badge</span>

Note:* Notify one of {primary|secondary|success|danger|bg-warning|bg-info|bg-light|bg-dark}

Example

This is primary Badge

This is secondary Badge

Simple Badge

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Badge

This is primary Badge

This is secondary Badge

This is success Badge

This is warning Badge
This is danger Badge

Code Explanation

Note: In this example, the badge concept is used to create additional information with respect to existing content.

Badge Contextual Classes

To change the background color of badge, use one of the contextual classes(badge-*).

Example

This is primary Badge

This is secondary Badge

This is success Badge

This is warning Badge

This is danger Badge

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Contextual Badge

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Code Explanation

Note: In this example, badge contextual classes have been used to change the background color of the badge.

Pill Badges

Badges can be created more rounded with a larger border-radius using the .rounded-pill utility class.

Example

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Pill Badge

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Code Explanation

Note: Pill badges are more rounded having a larger border radius.

Bootstrap 5 Badge Inside Button

Bootstrap 5 badge can be placed inside the button. Let us see it with an example.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Badge With Button

Code Explanation

Note: In this example, bootstrap 5 badges are placed inside the button.

Online Test / Quiz