Bootstrap Badges

Bootstrap 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 a relative font size emp units.

Example

This is a primary Badge

This is a secondary Badge

Steps To Create Bootstrap 5 Badges

Add the .badge i.e(badge class) together with contextual badge class like(.badge-*) to the <span> element base class to create a rectangular box i.e (badge).

Note: * Notifies one of from the following options: {primary| secondary| success| danger| bg-warning| bg-info| bg-light| bg-dark}.

General Syntax

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

Try it now

Source Code

          <div class="container mt-5"> 
  <p>This is primary <span class="badge bg-secondary">Badge</span></p>
  <p>This is secondary <span class="badge bg-secondary">Badge</span></p>
  <p>This is success <span class="badge bg-secondary">Badge</span></p>
  <p>This is warning <span class="badge bg-secondary">Badge</span></p>
  <p>This is danger <span class="badge bg-secondary">Badge</span></p>
</div>

Try it now

Code Explanation

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

Badge Contextual Classes

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

Example

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

General Syntax

      <span class="badge bg-*">Badge With Contextual Color Classes</span>

Try it now

Source Code

          <span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

Try it now

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

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

Try it now

Source Code

          <span class="badge badge-pill bg-primary">Primary</span>
<span class="badge badge-pill bg-secondary">Secondary</span>
<span class="badge badge-pill bg-success">Success</span>
<span class="badge badge-pill bg-danger">Danger</span>
<span class="badge badge-pill bg-warning">Warning</span>
<span class="badge badge-pill bg-info">Info</span>
<span class="badge badge-pill bg-light">Light</span>
<span class="badge badge-pill bg-dark">Dark</span>

Try it now

Code Explanation

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

Bootstrap 5 Badge Inside Button

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

Example

General Syntax

      <button type="button" class="btn btn-primary">
   Notification <span class="badge badge-light">4</span>
</button>

Try it now

Source Code

          <div class="container mt-5-">
  <div class="row">
    <div class="col-6 col-sm-6">
      <button type="button" class="btn btn-primary">
         Notification <span class="badge bg-dark">4</span>
      </button>
    </div>
    <div class="col-6 col-sm-6">
      <button type="button" class="btn btn-success">
        Email <span class="badge bg-info">14</span>
      </button>
    </div>
  </div>
</div>

Try it now