Bootstrap 3 - SPLessons

Bootstrap Label

Chapter 16

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Label

Bootstrap Label

shape 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.

shape Example

Below example demonstrates the use of Bootstrap labels altering various heading sizes using the label class.

<!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>

Output:

Example heading SPLessons

Example heading SPLessons

Example heading SPLessons

Example heading SPLessons

Example heading SPLessons
Example heading SPLessons

Contextual variations

shape Description

Bootstrap label is available in different variations. They can be emphasized with the contextual classes like primary, warning, and info.

shape Example

Below is the same example as above but the label-default has to be replaced with the respective contextual class.

<!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>


Output:

Summary

shape 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.