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

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*