Bootstrap Badges

Post by **C0D3D** »

Creating badges with Bootstrap

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Badges</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <h1>Bootstrap heading <span class="badge bg-secondary">New</span></h1>
    <h2>Bootstrap heading <span class="badge bg-secondary">New</span></h2>
    <h3>Bootstrap heading <span class="badge bg-secondary">New</span></h3>
    <h4>Bootstrap heading <span class="badge bg-secondary">New</span></h4>
    <h5>Bootstrap heading <span class="badge bg-secondary">New</span></h5>
    <h6>Bootstrap heading <span class="badge bg-secondary">New</span></h6>
</div>
</body>
</html>

Creating colored badges with Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Colored Badges</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <span class="badge bg-primary">Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-warning text-dark">Warning</span>
    <span class="badge bg-info text-dark">Info</span>
    <span class="badge bg-dark">Dark</span>
    <span class="badge bg-light text-dark">Light</span>
</div>
</body>
</html>

Creating pill badges with Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Pill Badges</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-warning text-dark">Warning</span>
    <span class="badge rounded-pill bg-info text-dark">Info</span>
    <span class="badge rounded-pill bg-dark">Dark</span>
    <span class="badge rounded-pill bg-light text-dark">Light</span>
</div>
</body>
</html>

Showing counter with Bootstrap badges

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Badges inside Nav</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <nav class="nav nav-pills">
        <a href="#" class="nav-link">Home</a>
        <a href="#" class="nav-link">Profile</a>
        <a href="#" class="nav-link active">Messages <span class="badge bg-light text-primary">24</span></a>
        <a href="#" class="nav-link">Notification <span class="badge bg-primary">5</span></a>
    </nav>
</div>
</body>
</html>

Positioning of Bootstrap badges

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Positioned Badge</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <button type="button" class="btn btn-primary position-relative">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">50+</span>
    </button>
</div>
</body>
</html>

Bootstrap Badges

Bootstrap Badges

Who is online