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.
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
Example for Active State in navigations
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.
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.