Bootstrap | Badges With Examples

Posted By Bajarangi soft , Posted On 12-10-2020

Badges are numbers that associated with the link to indicate the number of items associated with the link. The notification number seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it.

which tells the numbers of news or notifications to see by clicking it.
Example-1

<!DOCTYPE html>

<head>
    <title>badge example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .container {
            font-size:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="#">UPDATES<span class="badge badge-secondart"> 4 </span></a><br>
    <a href="#">NOTIFICATIONS<span class="badge badge-secondart"> 10 </span></a><br>
    <a href="#">MESSAGES<span class="badge badge-secondart"> 4 </span></a><br>
</body>
</html>

Contextual Variations: Badges can be used as part of links or button to provide a counter. Depending on how they used, badges must be confusing for the users, for this purpose different color of variations are used so that the user may not get confused.
Example-2

<!DOCTYPE html>

<head>
    <title>badge example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .container {
            font-size:20px;
            margin-top:30px;
        }
    </style>
</head>
<body>
<div class="container">
    <button type="button" class="btn btn-primary">
        NOTIFICATIONS <span class="badge badge-light">2</span>
    </button><br><br>
    <button type="button" class="btn btn-default">
        MESSAGES <span class="badge badge-warning">2</span>
    </button><br><br>
    <button type="button" class="btn btn-info">
        UPDATES <span class="badge badge-danger">2</span>
    </button><br><br>
    <button type="button" class="btn btn-light">
        NEWS <span class="badge badge-success">2</span>
    </button>
</body>
</html>

Pill Badges: The badges that uses class = “badge-pill” to make the corner more rounded.
Example-3

<!DOCTYPE html>

<head>
    <title>badge example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .container {
            font-size:20px;
            margin-top:30px;
        }
    </style>
</head>
<body>
<div class="container">
    <button type="button" class="btn btn-primary">
        NOTIFICATIONS <span class="badge badge-pill badge-light">2</span>
    </button><br><br>
    <button type="button" class="btn btn-default">
        MESSAGES <span class="badge badge-pill badge-warning">2</span>
    </button><br><br>
    <button type="button" class="btn btn-info">
        UPDATES <span class="badge badge-pill badge-danger">2</span>
    </button><br><br>
    <button type="button" class="btn btn-light">
        NEWS <span class="badge badge-pill badge-success">2</span>
    </button>
</div>
</body>
</html>

Badges as Link: Badges can also be used as a direct link to the new page.
Example-3

<!DOCTYPE html>

<head>
    <title>badge example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .container {
            font-size:20px;
            margin-top:30px;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="#"><button type="button" class="btn btn-primary">
        NOTIFICATIONS <span class="badge badge-pill badge-light">2</span>
    </button></a><br><br>
    <a href="nav.html"><button type="button" class="btn btn-default">
        MESSAGES <span class="badge badge-pill badge-warning">2</span>
    </button></a><br><br>
    <a href="#"><button type="button" class="btn btn-info">
        UPDATES <span class="badge badge-pill badge-danger">2</span>
    </button></a><br><br>
    <a href="#"><button type="button" class="btn btn-light">
        NEWS <span class="badge badge-pill badge-success">2</span>
    </button></a>
</body>
</html>

Related Post

How To Create Login Form Using Html , Bootstrap And Css
What Is Bootstrap How Does It Works
How To Use Bootstrap Container Class
How Can I Customize The Bootstrap Grid
What IS Mean By Bootstrap Typography ?
How To Add Background Image In Bootstrap 4
How To Create A Bootstrap Alert To Show Up
Which Group Is Used To Badges In Bootstrap
Bootstrap | Badges With Examples