Bootstrap Badges

In bootstrap, badges are useful to display important information on web pages such as number of new messages, new notifications, new posts, etc.

 

You can append the badges to any component such as a navigation bar, a panel, an alert message, a button, a link, etc. in bootstrap based on your requirements.

 

In bootstrap, we can create the badges by adding .badge class along with the other contextual classes (e.g. .badge-primary, .badge-light, etc.) to <span> element like as shown below.

 

Live Preview

<button type="button" class="btn btn-primary">

    Notifications <span class="badge badge-light">10</span>

</button>

<h2>News Feed <span class="badge badge-secondary">New</span></h2>

<a href="#"><span class="badge badge-secondary">4</span> Mirror links</a>

If you observe the above example, we created badges with different elements such as button, heading, hyperlink based on our requirements.

 

The above example will return the result like as shown below.

 

Bootstrap badges example result

Bootstrap Badge Sizes

In bootstrap, the size of the badges will vary based on the size of immediate parent element. If you observe the above example result the size of badges varies based on the parent element size.

 

Following is the example of creating the inline badges with header elements in bootstrap.

 

Live Preview

<h1>Header1 <span class="badge badge-secondary">New</span></h1>

<h2>Header2 <span class="badge badge-secondary">New</span></h2>

<h3>Header3 <span class="badge badge-secondary">New</span></h3>

<h4>Header4 <span class="badge badge-secondary">New</span></h4>

<h5>Header5 <span class="badge badge-secondary">New</span></h5>

<h6>Header6 <span class="badge badge-secondary">New</span></h6>

The above example will return the result like as shown below.

 

Bootstrap badge sizes example result

 

If you observe the above result, the size of badges varies based on the parent element size.

Bootstrap Badge Contextual Classes

In bootstrap, we have a different badge contextual classes (.badge-*) like as following to change the color of badges based on our requirements.

 

Live Preview

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-info">Info</span>

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

<span class="badge badge-dark">Dark</span>

The above example will return the result like as shown below.

 

Bootstrap change badges colors example result

Bootstrap Pill Badges

In bootstrap, we can create a badges with more rounded corners by adding .badge-pill class along with .badge class like as shown below.

 

Live Preview

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<span class="badge badge-pill badge-info">Info</span>

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

<span class="badge badge-pill badge-dark">Dark</span>

The above example will return the result like as shown below.

 

Bootstrap pill badges example result

Bootstrap Badges in Navigation Bar

As discussed, we can use badges with any component in bootstrap. Now we will see how to use badges with navigation bar.

 

Following is the example of showing the counters in a navigation bar using badges in bootstrap.

 

Live Preview

<ul class="nav nav-pills">

    <li class="nav-item">

        <a href="#" class="nav-link">Home</a>

    </li>

    <li class="nav-item">

        <a href="#" class="nav-link active">Profile <span class="badge badge-pill badge-light">5</span></a>

    </li>

    <li class="nav-item">

        <a href="#" class="nav-link">Messages <span class="badge badge-pill badge-danger">24</span></a>

    </li>

    <li class="nav-item">

        <a href="#" class="nav-link">Notification <span class="badge badge-pill badge-secondary">10+</span></a>

    </li>

</ul>

The above example will return the result like as shown below.

 

Bootstrap Badges in Navigation Bar Example Result

 

This is how we can use the badges in bootstrap to show notify the important information to the users based on our requirements. 

 
 
 

Topics Covered