Bootstrap Tutorial

Bootstrap Badges

Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items. The class .badge within the <span> element is used to create badges.

Example :

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Badges</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <a href="#">Mobiles <span class="badge">80</span></a><br>  
    <a href="#">Laptops <span class="badge">35</span></a><br>  
    <a href="#">Desktops <span class="badge">20</span></a> 

</div>

</body>
</html>

Output :

Mobiles 80
Laptops 35
Desktops 20

Adapts to active nav states

<!DOCTYPE html>
<html>
<head>
   <title>Adapts to active nav states</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <ul class="nav nav-pills" role="tablist">
      <li role="presentation"><a href="#">Home</a></li>
      <li role="presentation" class="active">
        <a href="#">Mobiles <span class="badge">80</span></a></li>
      <li role="presentation">
        <a href="#">Tablets <span class="badge">14</span></a></li>
      <li role="presentation">
        <a href="#">Laptops <span class="badge">35</span></a></li>
    </ul>

</div>

</body>
</html>

Output :

Bootstrap Labels

The bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.

Example :

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Lables</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <h1>Free Time Learning <span class = "label label-default">F T L</span></h1>
    <h2>Free Time Learning <span class =" label label-default">F T L</span></h2>
    <h3>Free Time Learning <span class = "label label-default">F T L</span></h3>
    <h4>Free Time Learning <span class = "label label-default">F T L</span></h4>
    <h5>Free Time Learning <span class = "label label-default">F T L</span></h5>
    <h6>Free Time Learning <span class = "label label-default">F T L</span></h6>

</div>

</body>
</html>

Output :

Free Time Learning F T L

Variations

Bootstrap labels using the modifier classes such as, label-default, label-primary, label-success, label-info, label-warning, label-danger as following.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Lables</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <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">Info Label</span>
    <span class = "label label-warning">Warning Label</span>
    <span class = "label label-danger">Danger Label</span>

</div>

</body>
</html>

Output :

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Bootstrap Tutorial