×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Labels [ use of .label class ] Bootstrap Jumbotron [ A Big Highlighted Container ]
Bootstrap Badges [ use of .badge class ] - Bootstrap 3
3577    Arnab De    17/05/2017

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.

softetechnologies

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

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
Bootstrap Labels [ use of .label class ] Bootstrap Jumbotron [ A Big Highlighted Container ]
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.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
The only source of knowledge is experience.
Albert Einstein
576
44.84
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36643
01/01/2018     34919
28/06/2017     32371
02/08/2017     30444
25/06/2018     30138
15/05/2017     25394
01/08/2017     24683
06/07/2017     24582
14/07/2017     20190
21/04/2018     19829
softetechnologies