Bootstrap Badge
Create a badge for user
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><!-- w ww. ja v a 2 s . c o m-->
<body style='margin: 20px;'>
<a href="#">Inbox <span class="badge">42</span></a>
</body>
</html>
Badge on a pill
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 . j a v a 2 s. c o m-->
<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>
Align to right
<!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 ww . j a v a 2 s . 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>
Badge on a navigation bar
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from ww w . jav a 2 s . c om-->
<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>