Badges
Bootstrap Badges are small count and labeling components used to add additional information to any content. Badges are commonly used to display a notification count, label new or important items, or to simply add a small bit of extra information next to text. In Bootstrap, badges are easy to implement and can be added to virtually any text element to provide key details in a highly visible yet non-disruptive format.
Classes for Bootstrap Badges
The following table lists the key classes used for Bootstrap Badges:
Class Name | Description |
.badge | The base class for all badges. |
.badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-light, .badge-dark | These classes add color to the badges, indicating different types of information or status. |
.badge-pill | Provides rounded corners for a pill-shaped badge, making it stand out more. |
.badge-* in <a> tags | Badges can also be used within <a> tags to create actionable badges. |
Code Examples with Explanation
Basic Badge:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Basic Badge Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1>Welcome to My Website <span class=”badge badge-secondary”>New</span></h1>
</body>
</html>
Explanation
- This example shows a basic use of a Bootstrap badge. The badge is placed within an <h1> tag, making the word “New” stand out.
- The class badge badge-secondary styles the badge with Bootstrap’s secondary color (typically gray), making it visually distinct from the main text.
Contextual Badges:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta viewport=”width=device-width, initial-scale=1.0″>
<title>Contextual Badges</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<p>Status: <span class=”badge badge-success”>Active</span></p>
<p>Message: <span class=”badge badge-danger”>Error</span></p>
</body>
</html>
Explanation
- This HTML snippet demonstrates how to use badges to indicate status or message types.
- The badge-success class applies a green background, often used to indicate success or an active status.
- The badge-danger class applies a red background, typically used to signal an error or warning.
Pill Badges:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta viewport=”width=device-width, initial-scale=1.0″>
<title>Pill Badges</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<ul class=”list-group”>
<li class=”list-group-item”>Item 1 <span class=”badge badge-pill badge-primary”>12</span></li>
<li class=”list-group-item”>Item 2 <span class=”badge badge-pill badge-secondary”>8</span></li>
</ul>
</body>
</html>
Explanation
- This code creates a list of items, each with a pill-shaped badge.
- The badge-pill class is used to make the badges rounded, giving them a distinctive, pill-like shape.
- Each badge has a different contextual color (primary and secondary), which can be used to categorize or prioritize items.
- Badges in Buttons:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta viewport=”width=device-width, initial-scale=1.0″>
<title>Badge in Button</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<button type=”button” class=”btn btn-primary”>
Notifications <span class=”badge badge-light”>4</span>
</button>
</body>
</html>
Explanation
- This example shows how to embed a badge within a button. This is a common pattern for displaying notification counts.
- The badge uses the badge-light class for a lighter color, contrasting with the btn-primary class of the button, ensuring the count is noticeable.
- Actionable Badges:
<a href=”#” class=”badge badge-primary”>Link Badge</a>
This example demonstrates a badge used as a clickable link, offering an interactive element for users.
Bootstrap badges are an effective way of adding small bits of information without taking up much space. They are particularly useful in user interfaces where space is limited, but quick informational cues are necessary.
Bootstrap badges are small, customizable elements used to display counts, statuses, or additional context within a user interface.
Yes, this tutorial is offered completely free on the Iqra Technology Academy platform.
The tutorial includes how to create and style badges, examples for Bootstrap 5 badges, and best practices for using badges in web design.
The tutorial is perfect for beginners and web developers looking to learn or refine their skills in using Bootstrap badges.
Yes, the tutorial provides multiple examples, including badge styles, colors, and integration into buttons, navigation menus, and other components.
Yes, the tutorial explains how to make badges responsive for mobile and desktop environments.
Absolutely! All code snippets and examples are free for personal and commercial use.
Yes, Iqra Technology provides tutorials in both English and Hindi.
Visit the Bootstrap Badges Tutorial Page to get started.
Bootstrap badges enhance user interface design by providing a simple way to convey additional information, counts, or statuses clearly.
