Description
Bootstrap Label will add styles to the content. Inline labels are mostly used to show any important information on web-pages like warnings, and tips in a different format.
To make use of Labels, add class .label to the <
span> class. Example
Below example demonstrates the use of Bootstrap labels altering various heading sizes using the label class.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Inline Labels</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h1>Example heading <span class="label label-default">SPLessons</span></h1>
<h2>Example heading <span class="label label-default">SPLessons</span></h2>
<h3>Example heading <span class="label label-default">SPLessons</span></h3>
<h4>Example heading <span class="label label-default">SPLessons</span></h4>
<h5>Example heading <span class="label label-default">SPLessons</span></h5>
<h6>Example heading <span class="label label-default">SPLessons</span></h6>
</div>
</body>
</html>
[/html]
Output:
Example heading SPLessons
Example heading SPLessons
Example heading SPLessons
Example heading SPLessons
Example heading SPLessons
Example heading SPLessons
Description
Bootstrap label is available in different variations. They can be emphasized with the contextual classes like primary, warning, and info.
Example
Below is the same example as above but the label-default has to be replaced with the respective contextual class.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Inline Labels</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</div>
</body>
</html>
[/html]
Output:
Key Points
Bootstrap Label chapter drwas out following main points covered.
- Bootstrap Labels are used to display the important information.
- Contextual classes can be applied to Labels using the label-primary class.