Bootstrap Tutorial - List group with badges








Add the badges component to any list group item and it will automatically be positioned on the right.

Example

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from  ww  w. j a v 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="list-group">
        <li class="list-group-item">
          <span class="badge">14</span>
          Cras justo odio
        </li>
        <li class="list-group-item">
          <span class="badge">2</span>
          Dapibus ac facilisis in
        </li>
        <li class="list-group-item">
          <span class="badge">1</span>
          Morbi leo risus
        </li>
</ul>

</body> 
</html>

Click to view the demo