The following code shows how to create list item with badge.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'
src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<style type='text/css'>
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
</style><!--from w w w. j a v a 2s . c om-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$('a').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
});//]]>
</script>
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item active"> Linked item in .list-group
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">44</span>
</a>
<a href="#" class="list-group-item">Linked item in .list-group with Chevron and Badge
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge badge-primary">14</span>
</a>
<a href="#" class="list-group-item">This is a preview of BS3
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">5</span>
</a> <a href="#" class="list-group-item">What happened to badge-success?
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge badge-success">88</span>
</a> <a href="#" class="list-group-item">Vestibulum at eros
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">69</span>
</a>
</div>
</body>
</html>