×
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
4950    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.
Sri Sri Ramakrishna Paramahamsa
All troubles come to an end when the ego dies
Sri Sri Ramakrishna Paramahamsa
1117
83.43
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     54555
25/06/2018     45645
01/01/2018     43961
28/06/2017     41468
02/08/2017     40576
01/08/2017     34563
06/07/2017     34343
15/05/2017     33581
11/09/2018     30916
14/07/2017     30374
softetechnologies