We now have a youtube channel. Subscribe!

Bootstrap | Badges

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.


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


Example for Active State in navigations



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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain