Bootstrap Tutorial - Bootstrap Badge Intro

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>
<body style='margin: 20px;'>
  <a href="#">Inbox <span class="badge">42</span></a>
</body>
</html>

Click to view the demo

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  .  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>

Click to view the demo

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><!--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>

Click to view the demo

Badge on a navigation bar

<!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>

Click to view the demo