Bootstrap Badges - Bootstarp Tutorial
Bootstrap Badges
- Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles.
![how-to-create-badges-with-bootstrap how-to-create-badges-with-bootstrap](https://cdn.wikitechy.com/tutorials/bootstrap/how-to-create-badges-with-bootstrap.gif)
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<h1>KaashivInfotech <span class="badge bg-secondary">New</span></h1>
<h2>KaashivInfotech <span class="badge bg-secondary">New</span></h2>
<h3>KaashivInfotech <span class="badge bg-secondary">New</span></h3>
<h4>KaashivInfotech <span class="badge bg-secondary">New</span></h4>
<h5>KaashivInfotech <span class="badge bg-secondary">New</span></h5>
<h6>KaashivInfotech <span class="badge bg-secondary">New</span></h6>
</body>
</html>
Output
![bootstrap-badges bootstrap-badges](https://cdn.wikitechy.com/tutorials/bootstrap/bootstrap-badges.png)
Bootstrap Badges Button
- Badges can be used as part of links or buttons to provide a counter.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
</body>
</html>
Output
![bootstrap-badges-button bootstrap-badges-button](https://cdn.wikitechy.com/tutorials/bootstrap/bootstrap-badges-button.png)
Bootstrap Badges Positioned Example 1
- Bootstrap badges can be positioned using CSS positioning properties such as position, top, bottom, left, and right.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<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">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
</body>
</html>
Output
![position-bootstrap-badges position-bootstrap-badges](https://cdn.wikitechy.com/tutorials/bootstrap/position-bootstrap-badges.png)
Bootstrap Badges Positioned Example 2
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
</body>
</html>
Output
![bootstrap-badges-positioned bootstrap-badges-positioned](https://cdn.wikitechy.com/tutorials/bootstrap/bootstrap-badges-positioned.png)
Bootstrap Badges Background Colors
- bg-primary: Blue background, for the main or primary action of the page.
- bg-secondary: Gray background, for secondary actions or information.
- bg-success: Green background, for successful or positive actions.
- bg-danger: Red background, for critical or dangerous actions.
- bg-warning: Yellow background, for warning or cautionary actions.
- bg-info: Light blue background, for informative or neutral messages.
- bg-light: Light gray background, for subdued or less important information.
- bg-dark: Dark gray background, for emphasis or contrast.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
</body>
</html>
Output
![bootstrap-badges-background-colors bootstrap-badges-background-colors](https://cdn.wikitechy.com/tutorials/bootstrap/bootstrap-badges-background-colors.png)
Bootstrap Pill Badges
- Bootstrap pill badges are similar to regular badges, but they have rounded corners and a pill-like shape. They are often used to indicate different categories or filters in a webpage.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
</body>
</html>
Output
![bootstrap-pill-badges bootstrap-pill-badges](https://cdn.wikitechy.com/tutorials/bootstrap/bootstrap-pill-badges.png)