Twitter Bootstrap inline labels and badges tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

Using Twitter Bootstrap, you may create inline labels, i.e. Label and annotate text and badges, i.e. indicators and unread counts.

Inline labels

You may create eye-catching labels and annotate text with Inline Labels.

Example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap inline label Example</title> 
<meta name="description" content="Twitter Bootstrap inline label Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
</body>
</html>

View online

From line number 3162 to line number 3200 of bootstrap.css, styles for the label, label-success, label-warning, label-important, label-info, and label-inverse are present.

Badges

As Twitter Bootstrap says,

Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notification

Example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap badges Example</title> 
<meta name="description" content="Twitter Bootstrap badges Example">
<link href="bootstrap-2.0.3.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
</body>
</html>

Notice that we have use bootstrap-2.0.3.css for this example, since styles for badges are not available in Bootstrap v2.0.1 css.

View online

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap navbar tutorial
Next: Twitter Bootstrap Thumbnails tutorial