Bootstrap Badges [ use of .badge class ]
17-05-2017    1074 times
Bootstrap Badges

Bootstrap Badges

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.

Tutorial at home

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

bootstrap badges example
Badges Example
Tutorial at home

Badges used in Navbar

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

Badges in Vertical Nav Bar
Badges in Vertical Nav Bar
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post