This chapter will discuss about bootstrap badges and the classes to create badges. Badges are frequently used for highlighting important details on web pages, such as headings, warnings, and notification counters.
Bootstrap badges are numerical indication or notification counters (of how many items are associated with a link).
Badges
To scale them according to the size of the immediate parent element, badge uses comparative font scaling and em units. In page links, focus or hover styles are no longer supported as of version 5.
Following example demonstrates how to create inline badges using Bootstrap.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body><h1>Sample heading <span class="badge bg-secondary">New</span></h1><h2>Sample heading <span class="badge bg-secondary">Offer</span></h2><h3>Sample heading <span class="badge bg-secondary">New</span></h3><h4>Sample heading <span class="badge bg-secondary">Offer</span></h4><h5>Sample heading <span class="badge bg-secondary">New</span></h5><h6>Sample heading <span class="badge bg-secondary">Offer</span></h6></body></html>
Buttons
Badges can be used as part of links or buttons to provide a counter. The users will only see the content of the badge because of how badges are styled, which gives a visual cue as to their purpose. These badges may appear to be random additions of words or numbers at the conclusion of a sentence, a link, or a button, based on the circumstances.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-success" style="margin: 20px;">Messages <span class="badge text-bg-warning">6</span></button></body></html></pre>Notifications
This example explains a visually hidden class with a portion of additional text where users can see the digit "32" represents the number of notifications.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-success position-relative" style="margin: 20px;">Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary"> 32+ <span class="visually-hidden">unread notifications</span></span></button></body></html></pre>Positioned
A .badge can be modified with top-0 , start-100 , translate-middle utilities and placed in the corner of a link or button. Let's look at the sample below to see how it generally functions.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-primary position-relative" style="margin: 20px;">Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info"> 55+ <span class="visually-hidden">unread notifications</span></span></button></body></html></pre>Indicator
Bootstrap Badges are a numerical indication of the number of items associated with a link. Items that are new or unread are highlighted using badges
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-info position-relative" style="margin: 20px;">Webinar <span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle"><span class="visually-hidden">New notifications</span></span></button></body></html></pre>Background colors
Using the .text-bg-{color} helpers , users may set a background color with a contrasting foreground color. In the past, pairing the preferred .text-{color} and .bg-{color} utilities manually was necessary for styling; nevertheless, users are still free to do so if they wish.
Use the text-bg-primary, text-bg-info, text-bg-success etc. utility classes offered by bootstrap's background colour framework to instantly change the appearance of the badges.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body style="margin: 20px;"><span class="badge text-bg-primary">Primary</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-light">Light</span><span class="badge text-bg-dark">Dark</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-danger">Danger</span></body></html>Pill Badges
Users can design badges in the shape of pills, or badges having more rounded corners, by using the .rounded-pill modifier class, as demonstrated in the example below.
To quickly modify the appearance of the badges, use the .rounded-pill utility classes provided in bootstrap's background color framework.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>Bootstrap - Badges</title></head><body style="margin: 20px;"><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-info">Info</span><span class="badge rounded-pill text-bg-success">Success</span><span class="badge rounded-pill text-bg-light">Light</span><span class="badge rounded-pill text-bg-dark">Dark</span><span class="badge rounded-pill text-bg-danger">Danger</span><span class="badge rounded-pill text-bg-warning">Warning</span></body></html>