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

Bootstrap Label Example

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>

Bootstrap Labels Modifier Classes Example

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest

Share This

Share this post with your friends!

Share This

Share this post with your friends!