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

<div class="container mt-5-">

    <h2 class="mt-2 text-success text-center">Bootstrap Contextual  Badge</h2>

   <div class="row">

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
             <span class="badge bg-primary">Primary</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge bg-secondary">Secondary</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge bg-success">Success</span>

        </div>

       <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge bg-danger">Danger</span>

       </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
            <span class="badge bg-warning">Warning</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
          
            <span class="badge bg-info">Info</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3"> 

           <span class="badge bg-light">Light</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge bg-dark">Dark</span> 

        </div>

      </div>

  </div><!--/container-->

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

<div class="container mt-5-">

       <h2 class="mt-2 text-success text-center">Bootstrap Pill Badge</h2>
      
      <div class="row">

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-primary">Primary</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-secondary">Secondary</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-success">Success</span>

        </div>


        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-danger">Danger</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-warning">Warning</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
          
           <span class="badge badge-pill bg-info">Info</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3"> 

           <span class="badge badge-pill bg-light">Light</span>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 mt-3">
           
           <span class="badge badge-pill bg-dark">Dark</span>

        </div>

      </div>

  </div><!--/container-->

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.

Bootstrap 5 Badges

Steps To Create Bootstrap 5 Badges

Example

Simple Badge

General Syntax

Source Code

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

Badge Contextual Classes

Example

General Syntax

Source Code

Source Code : Output

Bootstrap Contextual Badge

Code Explanation

Pill Badges

Example

General Syntax

Source Code

Source Code : Output

Bootstrap Pill Badge

Code Explanation

Bootstrap 5 Badge Inside Button

Example

General Syntax

Source Code

Source Code : Output

Badge With Button

Code Explanation

Online Test / Quiz

Our Tutorials