×
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
3010    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
The supreme purpose and goal for human life... is to cultivate love.
Sri Sri Ramakrishna Paramahamsa
3033
34.08
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33580
28/06/2017     29498
02/08/2017     26981
26/05/2018     26935
15/05/2017     23200
06/07/2017     21670
01/08/2017     21288
25/06/2018     20034
21/04/2018     18609
14/07/2017     16432
softetechnologies