Bootstrap Labels [ use of .label class ]
17-05-2017    300 times
Bootstrap Labels

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.

Tutorial at home

<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
Tutorial at home

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