Bootstrap | Badges

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial post, we will be discussing about Bootstrap Badges.

Badges are very much similar to labels, the key difference is that the corners are more rounded. Bootstrap badges are mostly used to highlight new or unread items. In order to use badges, add <span class = "badges"> to links, navs, and more.

Example

Following example demonstrates this -

<a href = "#">Mailbox <span class = "badge">50</span></a>

Output

When the above example is executed, it will produce the following result -

Mailbox 50

When there are no new or unread items, the badges collapse vis CSS's :empty selector, provided no content exists within.

READ: Bootstrap | Labels

Active Nav States

You can place badges in active states of pill and list navigations. You can achieve this by putting <span class = "badge"> to the active links.

Example

Following example demonstrates this -

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

Output

When the above example is executed, it will produce the following result -

Example for Active State in Pill
Home 42
Profile
Messages 3
Example for Active State in navigations
42Home
Profile
3Messages

READ: Bootstrap | Pagination

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Jumbotron.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.