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

Example

Materialize Tutorial New

Bulma Tutorial New

How To Create Bootstrap Badges ?

Follow the given below step to create badges of Bootstrap 5 .

  • Add .badge class to the <span> element base class.
  • Add an additional badge contextual classes (badge-*) class to the <span> element to provide different background color of the badges.

Note: Here, * specifies one of from the followings:{ primary | secondary | success | danger | bg-warning | bg-info | bg-light | bg-dark }

General Syntax

      <span class="badge badge-*">Badge</span>
    
Try It Now

Source Code

    <h3>Result <span class="badge bg-secondary">New</span></h3>
<h3>Score <span class="badge bg-secondary">Upcoming</span></h3>
  
Try it yourself

Source Code : Output

Result New

Score Upcoming

Note: Badges in Bootstrap provides an additional information with respect to the existing content.

Background Colors

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

Example

Materialize CSS New

Bulma CSS New

General Syntax

      <span class="badge bg-*">Primary</span>
    
Try It Now

Source Code

    <span class="badge bg-primary">Primary Badge</span>
<span class="badge bg-secondary">Secondary Badge</span>
  
Try it yourself

Source Code : Output

Primary Badge Secondary Badge

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

PHP Tutorial New

Python Tutorial New

General Syntax

      <span class="badge badge-pill bg-*">Primary</span>
    
Try It Now

Source Code

    <span class="badge badge-pill bg-primary">Pill Primary Badge</span>
<span class="badge badge-pill bg-secondary">Pill Secondary Badge</span>
  
Try it yourself

Source Code : Output

Pill Primary Badge Pill Secondary Badge

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

Badges Inside Button

Badges can be placed inside the button. Let us see it with an example.

Example

General Syntax

      <button type="button" class="btn btn-*">
      Badge Notification <span class="badge badge-*">N</span>
</button>
    
Try It Now

Source Code

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

Source Code : Output

Online Test / Quiz
Web Tutorials
Bootstrap Badges
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS