Bootstrap Badges And Labels

If you have used Facebook or any other social media site, you are may be familiar with notifications, messages and updates etc. These notifications often appear in the form of a small rounded circle. These circles are called badges in technical terms. A badge is denotes some specific number which can be anything. It can be number of emails, number of login attempts etc. You can use badges to display any numeric information on your webpage. To use badges in your application, simply add “badge” class to the opening span tag. The number denoted by the badge is written inside the opening and closing spans. Take a look at the following example to see Bootstrap badges are created.

Bootstrap Badges

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <a href="#">Messages <span class="badge">2</span></a><br>
        <a href="#">Notifications <span class="badge">10</span></a><br>
        <a href="#">Friend Requests <span class="badge">1</span></a>
        <br>
        <button type="button" class="btn btn-info">Updates <span class="badge">5</span></button>
    </body>

</html>

Download the code
Try the code

If you open the webpage in a browser, you should see three texts with a badge and a button with some badge. See, how the outlook of the badge varies with the element in which it exists. A badge inside an anchor tag has dark grey background by default whereas a badge within a button has white background by default.

Bootstrap Labels

Badges normally denote numerical values, however labels may contain numeric as well as text information. Labels usually enhance information. For instance, you can use labels to specify all the unread messages etc. To use, labels in your applications you have to add two classes: “label” and “label-type”. Here type is the type of label you want to create. There are six label types i.e. default, primary, success, info, warning and danger. To see how labels work, take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Messages <span class="label label-default">Unread</span></h1>
        <h1>Messages <span class="label label-primary">Unread</span></h1>
        <h1>Messages <span class="label label-success">Unread</span></h1>
        <h1>Messages <span class="label label-info">Unread</span></h1>
        <h1>Messages <span class="label label-warning">Unread</span></h1>
        <h1>Messages <span class="label label-danger">Unread</span></h1>

    </body>

</html>

Download the code
Try the code

If you open the above webpage, you should see all the six types of labels inside h1 headings. Notice, like badges, labels are also used inside the span tags.

<<< Bootstrap Glyphicons And WellsBootstrap Progress Bars >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .