Twitter Bootstrap - Inline Labels and Badges Tutorial

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

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.

Comments

Post a Comment