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:

headings

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:

CODE