Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Bootstrap Labels
Labels are great for offering counts, tips, or other markups for pages. Bootstrap provides the .label class to create inline labels that complement text content.
Basic Label Syntax
Use the .label class along with contextual classes to create different styled labels:
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span>
Example
Here's a complete example showing labels used with headings to display counts:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Labels 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>
<div class="container">
<h1>Tutorials
<span class="label label-default">150</span>
</h1>
<h2>Quiz
<span class="label label-primary">90</span>
</h2>
<h3>Articles
<span class="label label-success">25</span>
</h3>
</div>
</body>
</html>
Contextual Label Classes
Bootstrap provides several contextual classes for different label styles:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Label Variations</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<p><span class="label label-default">Default</span></p>
<p><span class="label label-primary">Primary</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-danger">Danger</span></p>
</div>
</body>
</html>
Common Use Cases
Labels are commonly used for:
- Counts: Displaying numbers like notification counts or item quantities
- Status indicators: Showing status like "New", "Updated", or "Popular"
- Categories: Tagging content with category labels
- Version numbers: Indicating software or content versions
Conclusion
Bootstrap labels provide a simple way to add small, inline annotations to your content. Use contextual classes to match your design's color scheme and purpose.
Updated on: 2026-03-15T23:18:59+05:30
225 Views
Advertisements