Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style='margin: 20px;'>
<a href="#">Inbox <span class="badge">42</span></a>
</body>
</html>
Built-in styles are included for placing badges in active states in pill and list navigations.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head><!-- w w w . ja v a 2 s . com-->
<body style='margin: 20px;'>
<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>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head><!--from w w w .ja va 2s. co m-->
<body style='margin: 20px;'>
<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>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- w ww . j av a 2 s .c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<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>
</body>
</html>