Bootstrap Badges
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:
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:
