×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Alert [Success | Info | Warning | Danger] Bootstrap Badges [ use of .badge class ]
Bootstrap Labels [ use of .label class ] - Bootstrap 3
3329    Arnab De    17/05/2017

Bootstrap Labels

Bootstrap Labels is use to display some additional information to the text or link. It is generally use for display some extra information about the link or any heading. Assume we add a new paragraph in our documents and try to indicate it. Then we can use the label to indicate it. We must use the .label class to create bootstrap label. To create a label we must use <span> tag.

softetechnologies

<html>
<head>
<title>Badge Examples</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
div
{
width:500px;
position:relative;
top:100px;
left:100px;
font-weight:bold;
}
</style>
</head>
<div>
<h1>Example New Topic<span class="label label-danger">new</span></h1>
</div>
</html>

Bootstrap Label
Bootstrap Label

Types of Bootstrap Labels

Six types of labels are possible in bootstrap. We use the following classes for different type of the Labels.

  • label-default
  • label-primary
  • label-success
  • label-info
  • label-warning
  • label-danger
softetechnologies

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Bootstrap Label Types Types Of Bootstrap Label
Bootstrap Label Types
Bootstrap Label Types
Bootstrap Alert [Success | Info | Warning | Danger] Bootstrap Badges [ use of .badge class ]
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
If you want to go east, don't go west.
Sri Sri Ramakrishna Paramahamsa
1117
84.88
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     54767
25/06/2018     45875
01/01/2018     44081
28/06/2017     41629
02/08/2017     40723
01/08/2017     34721
06/07/2017     34499
15/05/2017     33713
11/09/2018     31291
14/07/2017     30578
softetechnologies