Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Tags

This chapter will explain Bootstrap labels. Labels can be used for counting, hints, or other marking displays on the page. Use the class .label To display labels, as shown in the following examples:

Online Examples

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　Labels</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h4>Example Heading <span class="label label-default">Label</span></h4>
</body>
</html>

Test It ‹/›

The results are as follows:

You can use decorated classes label-default, label-primary, label-success, label-info, label-warning, label-danger To change the appearance of labels, as shown in the following examples:

Online Examples

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　Variants of Label</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Information Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Dangerous Label</span>
</body>
</html>

Test It ‹/›

The results are as follows:

More label examples

Class	Description	Example
.label label-default	Default gray label	Try It
.label label-success	Green label of "success" type	Try It
.label label-warning	Yellow label of "warning" type	Try It

Bootstrap Badges Bootstrap Pagination