Bootstrap Badges
If we want to add special information or to attract more to the particular text than we can use badges. And we use .badge class for it.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Badges</h2>
<h1>BestT-shirts <span class="badge bg-secondary">20% discount</span></h1>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Badges
BestT-shirts 20% discount
Like here through the badges we just attract the 20% discount.
Contextual Badges
If we want to change the color of this badge , so through color also it express the context.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Color Badges</h2>
<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Color Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
So here we just changed the color of badges .
Badges
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges</h2>
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
</div>
</body>
</html>
Output
bootstrap 5 Example
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges inside a Button
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badge inside a Button</h2>
<button type="button" class="btn btn-primary"> Messages <span class="badge bg-dark">4</span>
</button>
<button type="button" class="btn btn-danger"> Notifications <span class="badge bg-dark">7</span>
</button>
</div>
</body>
</html>
Output
bootstrap 5 Example
Badge inside a Button
Messages 4
Notifications 7