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.
[code lang=”xml”]
<!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>
[/code]
Above script defines label class to display labels from h1 to h6 as specified within the div element.
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:
[code lang=”xml”]
<!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>
[/code]
Leave a Reply