Bootstrap Badges and Labels

Badges and Labels

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.

Bootstrap labels are used to specify the additional information about something like offering counts, tips, or other makeup for pages.

contextual label classes

label-default
label-primary
label-success
label-info
label-warning
label-danger

Hint : To create a label within a <span> element.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>
        hr {
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>Bootstrap Badges and Labels</h3>
        <div class="row">
            <div class="col-md-6">
                <a href="#">Inbox <span class="badge">10</span></a> <br>
                <a href="#">Outbox <span class="badge">2</span></a> <br>
                <a href="#">Spam <span class="badge">5</span></a> <br>
                <a href="#">Social <span class="badge">50</span></a> <br>
                <hr>
                <button class="btn btn-danger">Inbox<span class="badge">10</span></button>
                <hr>
                <span class="label label-default">Default</span>
                <span class="label label-primary">primary</span>
                <span class="label label-success">success</span>
                <span class="label label-danger">danger</span>
                <span class="label label-info">info</span>
                <span class="label label-warning">warning</span>
                <hr>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>

To download raw file Click Here

Badges and Labels

Source Code

Bootstrap Tutorial