Bootstrap 5 Badges
Last Updated :
04 Apr, 2024
Bootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.
Bootstrap-5 Badges
| Concept | Description |
|---|
| Badge Headings | Labels latest information about headings. |
| Badges Buttons | Shows small count or notification dot. |
| Badges Positioned | Positions badge in the corner of the button or link. |
| Background colors | Provides utility classes for badge backgrounds. |
| Pill Badges | Creates pill-shaped badges using rounded-pill class. |
| SASS | Used to customize badge properties like font size, color, padding, border radius, etc. |
Syntax:Â Â
<div class="badge bg-type"> Contents... <div>
Examples of Bootstrap 5 Badges
Example 1: This example demonstrates the working of the first four types of Badges in Bootstrap 5.Â
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
</head>
<body>
<div
id="canvas"
style="
width: 600px;
height: 200px;
margin: 20px;
"
>
<h2>Bootstrap 5 Badges</h2>
<h4>
Hello World
<span class="badge bg-primary">
GeeksforGeeks
</span>
</h4>
<h4>
Hello World
<span class="badge bg-secondary">
GeeksforGeeks
</span>
</h4>
<h4>
Hello World
<span class="badge bg-success">
GeeksforGeeks
</span>
</h4>
<h4>
Hello World
<span class="badge bg-danger">
GeeksforGeeks
</span>
</h4>
</div>
</body>
</html>
Output:
Bootstrap 5 Badges Example Output
Example 2: This example shows the working of notification badges in Bootstrap 5.Â
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
</head>
<body style="text-align: center">
<div class="container mt-3">
<h1 >
Notification badges in Bootstrap 5
</h1>
<button
type="button"
class="btn btn-primary"
>
Notifications
<span class="badge bg-secondary">
10
</span>
</button>
</div>
</body>
</html>
Output:
Supported Browser:
Share your thoughts in the comments
Please Login to comment...