FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Bootstrap badges are generally use for display the additional information to the link, like occurrence number of a particular link. It may use with the any link or button or navbar. This class is very impotant when wese it a vertical or horizontal navbar. We can also use it in different chart created by javascript or JQuery.
<html>
<head>
<title>Badge Examples</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
div
{
width: 150px;
position: relative;
top: 100px;
left: 100px;
font-weight: bold;
}</style>
</head>
<div>
<a href="#"> User <span class="badge" style="float:right"> 1000 </span> </a> <br>
<a href="#"> Loged User <span class="badge" style="float:right"> 501 </span> </a> <br> <br>
<button type="button" class="btn btn-danger pull-right">new Message<span class="badge">10</span></button>
<br><br><br><br><br>
</div>
</html>
<html>
<head>
<title>Badge Examples</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
div
{
width: 230px;
position: relative;
top: 100px;
left: 100px;
font-weight: bold;
}</style></head>
<div style="text-align:center"><u>Vertical navbar</u></div><br>
<div>
<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>
</div>
<div style="text-align:center"><u> horizontal navbar </u> </div> <br>
<div>
<ul class="nav nav-pills" style="width:500px;">
<li class="active">
<a href = "#"><span class="badge pull-right">42</span>User</a>
</li>
<li><a href = "#">Page</a></li>
<li> <a href = "#"> <span class="badge pull-right">3</span> Activity</a></li>
</ul>
</div> </div> </html>
