Bootstrap Labels
In this section we are going to describe the labels used in bootstrap. Consider the following example in which we have used default label class:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = ” / bootstrap / css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = ” / scripts/ jquery. min. js” ></ script >
< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >
</ head >
< body >
< h1 > Heading 1< span class = “label label- default ” > Label </ span >< /h1 >
< h2 > Heading 2 < span class =” label label- default” > Label </ span ></ h2 >
< h3 > Heading 3 < span class = “label label- default ” > Label </ span >< /h3 >
< h4 > Heading 4 < span class = “label label- default” > Label </ span ></ h4 >
< /body >
</ html >
The above code will generate the following result:
OUTPUT:
In bootstrap we can have different types of label that can be implemented by using different modifier classes for example label-primary, label-default, etc.
Consider the following example in which we have implemented the different types of labels by using the modifier classes:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<span class = “label label-default”>Default Label</span><br><br>
<span class = “label label-primary”>Primary Label</span><br><br>
<span class = “label label-success”>Success Label</span><br><br>
<span class = “label label-info”>Info Label</span><br><br>
<span class = “label label-warning”>Warning Label</span><br><br>
<span class = “label label-danger”>Danger Label</span>
</body>
</html>
The above example will generate the following result:
OUTPUT:
