Bootstrap Tutorial - Add badge to list group item








The following code shows how to add badge to list group item.

Example

<!--  ww w  .  j a  v  a 2s. c  o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-3">
          <ul class="list-group">
          <li class="list-group-item">Inbox <span class="badge">14</span></li>
          <li class="list-group-item">Sent <span class="badge">4</span></li>
          <li class="list-group-item">Drafts <span class="badge">7</span></li>
          <li class="list-group-item">Deleted <span class="badge">24</span></li>
          <li class="list-group-item">Spam <span class="badge">134</span></li>
        </ul>
        </div>
      </div>    
    </div>
  </body>
</html>

Click to view the demo