Bootstrap Labels

label represents a caption for an item in a user interface. It is used to add label to a form control like important notes, warning messages etc. We can also create catching labels and annotate text with inline labels. If we want to specify some important note related to its particular concept, then we can make use of inline label in Bootstrap.

also read:

Bootstrap Setup

Bootstrap Typography

Bootstrap Label Example

Bootstrap provides class called .label to display labels on the web page and can be used within span element as shown in the following example. If you have any questions about bootstrap labels, please write it in the comments section.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Label Example</h2>
<div class="container">
   <h1>Bootstrap<span class="label label-default">label</span></h1>
   <h2>Bootstrap<span class="label label-default">label</span></h2>
   <h3>Bootstrap<span class="label label-default">label</span></h3>
   <h4>Bootstrap<span class="label label-default">label</span></h4>
   <h5>Bootstrap<span class="label label-default">label</span></h5>
   <h6>Bootstrap<span class="label label-default">label</span></h6>
</div>
</body>
</html>

Above script defines label class to display labels from h1 to h6 as specified within the div element.

Run Bootstrap Label Example Demo

Labels using Modifier Classes

In Bootstrap, we can get different types of variations to change appearance of the inline labels. These can be listed as follows:

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

The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Labels with Modifier Classes</h2><br>
   <span class="label label-default">Default</span></h1>
   <span class="label label-primary">Primary</span></h2>
   <span class="label label-success">Success</span></h3>
   <span class="label label-info">Info</span></h4>
   <span class="label label-warning">Warning</span></h5>
   <span class="label label-danger">Danger</span></h6>
</div>
</body>
</html>

Run Bootstrap Labels Modifier Classes Example Demo

Bootstrap Label Example

Labels using Modifier Classes

About Krishna Srinivasan