Prev Page
Next Page  
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

Free Time Learning F T L

Free Time Learning F T L

Free Time Learning F T L

Free Time Learning F T L
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
  Prev Page
Next Page