Bootstrap Badges

In this section we are going to discuss the badges in bootstrap. In bootstrap the only difference between a badge and a label is that the corners of the badge are rounded. In bootstrap we use badges to highlight the content that is not being read yet. Badges can be added by adding the following line of code:

<span class= “badge”> to bootstrap links or even to the navigation bars.

Consider the following example in which we have used badge to highlight the unopened message:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example < /title >

< link href = ” / bootstrap/ css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js/ bootstrap. min. js ” ></ script >

< /head >

< body >

< a > Messages < span class = “badge” > 24 </ span >< /a >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

Messages

The :empty selector of CSS will collapse the badge if there is no new message.


Active Nav States:

The badges in bootstrap can be made active in navigation bars or pills by using <span class = “badge”> with the active links.

Consider the following example in which we have done this:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

<link href=”/bootstrap/css/bootstrap. min. css ” rel = “stylesheet” >

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<center><h4>Active State in Pills</h4></center>

<ul class = “nav nav-pills”>

<li class = “active”><a>Home <span class =”badge”>12</span></a>

</li>

<li><a>Notifications<span class =”badge”>2</span></a></li>

<li><a>Updates<span class = “badge”>8</span></a></li>

</ul>

<br>

<br>

<center><h4> Active State in Navigation Bar</h4></center><br>

<ul class = “nav nav-pills nav-stacked” style = “max-width: 260px;”>

<li>

<a>

<span class = “badge pull-right”>12</span>

Home

</a>

</li>

<li class = “active”><a>Notifications<span class =”badge pull-right”>2

</span></a></li>

<li>

<a>

<span class = “badge pull-right”>8</span>

Updates

</a>

</li>

</ul>

</body>

</html>

The above example will generate the following result:

OUTPUT:

Active Nav States