Menu
Bootstrap 5 Badges
Badges
Badges are used to add additional information to any content:
Use the .badge class together with a contextual class (like .bg-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Badges</h2>
<h1>Example heading <span>New</span></h1>
<h2>Example heading <span>New</span></h2>
<h3>Example heading <span>New</span></h3>
<h4>Example heading <span>New</span></h4>
<h5>Example heading <span>New</span></h5>
<h6>Example heading <span>New</span></h6>
</div>
</body>
</html>
Contextual Badges
Primary Secondary Success Danger Warning Info Light Dark
Use any of the contextual classes (.bg-*) to change the color of a badge:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Contextual Badges</h2>
<span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span>
</div>
</body>
</html>
Pill Badges
Primary Secondary Success Danger Warning Info Light Dark
Use the .rounded-pill class to make the badges more round:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Pill Badges</h2>
<span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span>
</div>
</body>
</html>
Badge inside an Element
An example of using a badge inside a button:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Badge inside a Button</h2>
<button type=”button”>
Messages <span>4</span>
</button>
<button type=”button”>
Notifications <span>7</span>
</button>
</div>
</body>
</html>