Default Badges
Bootstrap badges are created using the .badge class and can be customized with color classes like
.bg-primary, .bg-secondary, and more to match your design requirements.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-dark">Dark</span>
<span class="badge bg-light text-body">Light</span>Pill-Shaped Badge
To create a badge with a primary background and a rounded pill shape, use the following Bootstrap classes: .badge, .bg-primary, and .rounded-pill.
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-info rounded-pill">Info</span>
<span class="badge bg-warning rounded-pill">Warning</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-dark rounded-pill">Dark</span>
<span class="badge bg-light rounded-pill text-body">Light</span>Light Badges
To create Light badges in Bootstrap, utilize the .badge class. You can enhance the appearance of your badges by applying color classes such as .bg-primary-subtle, .badge-secondary-subtle etc.
<span class="badge bg-primary-subtle text-primary">Primary</span>
<span class="badge bg-secondary-subtle text-secondary">Secondary</span>
<span class="badge bg-success-subtle text-success">Success</span>
<span class="badge bg-info-subtle text-info">Info</span>
<span class="badge bg-warning-subtle text-warning">Warning</span>
<span class="badge bg-danger-subtle text-danger">Danger</span>
<span class="badge bg-dark-subtle text-body">Dark</span>
<span class="badge bg-light-subtle text-body text-body">Light</span>Pill-Shaped Light Badges
To create a stylish badge with a primary color background and a rounded pill shape, you can utilize the .badge, .bg-primary-subtle, and .rounded-pill classes.
<span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span>
<span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span>
<span class="badge rounded-pill bg-success-subtle text-success">Success</span>
<span class="badge rounded-pill bg-info-subtle text-info">Info</span>
<span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span>
<span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span>
<span class="badge rounded-pill bg-dark-subtle text-body">Dark</span>
<span class="badge rounded-pill bg-light-subtle text-body">Light</span>Outline Badges
Use default badges in Bootstrap with the .badge class. Add color classes like .border, .border-*, etc., to style the badge.
<span class="badge border border-primary text-primary">Primary</span>
<span class="badge border border-secondary text-secondary">Secondary</span>
<span class="badge border border-success text-success">Success</span>
<span class="badge border border-info text-info">Info</span>
<span class="badge border border-warning text-warning">Warning</span>
<span class="badge border border-danger text-danger">Danger</span>
<span class="badge border border-dark text-body">Dark</span>
<span class="badge border border-light text-body">Light</span>Pill-Shaped Outline Badges
Create a badge with a primary background and rounded pill shape using .badge, .border, .border-* and .rounded-pill classes.
<span class="badge rounded-pill border border-primary text-primary">Primary</span>
<span class="badge rounded-pill border border-secondary text-secondary">Secondary</span>
<span class="badge rounded-pill border border-success text-success">Success</span>
<span class="badge rounded-pill border border-info text-info">Info</span>
<span class="badge rounded-pill border border-warning text-warning">Warning</span>
<span class="badge rounded-pill border border-danger text-danger">Danger</span>
<span class="badge rounded-pill border border-dark text-body">Dark</span>
<span class="badge rounded-pill border border-light text-body">Light</span>Button Badges
Add a badge to a Bootstrap button by placing a <span class="badge"> inside the button. This is great for showing counts or notifications on the button.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-success ms-1">4</span>
</button>
<button type="button" class="btn btn-success">
Messages <span class="badge bg-danger ms-1">2</span>
</button>
<button type="button" class="btn btn-outline-secondary">
Draft <span class="badge bg-success ms-1">2</span>
</button>Outline Button Badges
Add a badge to a Bootstrap button by placing a <span class="badge"> inside the button. This is great for showing counts or notifications on the button.
<button type="button" class="btn btn-outline-primary">
Notifications <span class="badge bg-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-outline-danger">
Notifications <span class="badge bg-danger rounded-pill ms-1">2</span>
</button>
<button type="button" class="btn btn-outline-success position-relative">
Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">7
<span class="visually-hidden">New</span></span>
</button>
<button type="button" class="btn btn-outline-info position-relative">
Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">New
<span class="visually-hidden">New</span></span>
</button>
Button Position Badges
Position badges on Bootstrap buttons by placing a <span class="badge position-absolute"> inside the button. Use utility classes like .top-0 and .end-0 to adjust the badge position.
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+9 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-primary position-relative p-0 icon-btn rounded">
<i class="ri-mail-fill"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-notification-4-fill"></i>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-menu-line"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</button>Badge with Icons
Icon badges can be used to represent actions, statuses, or notifications visually. Combine Bootstrap's
.badge class with an <i> icon element for a modern UI.
<span class="badge bg-primary"><i class="ri-notification-3-line"></i> Alerts</span>
<span class="badge bg-secondary-subtle text-secondary"><i class="ri-mail-line"></i> Messages</span>
<span class="badge bg-outline-success text-success border border-success"><i class="ri-check-line"></i> Approved</span>
<span class="badge bg-info rounded-pill"><i class="ri-information-line"></i> Info</span>
<span class="badge bg-warning-subtle text-warning rounded-pill"><i class="ri-error-warning-line"></i> Warnings</span>
<span class="badge bg-outline-danger-subtle text-danger border border-danger rounded-pill"><i class="ri-close-line"></i> Errors</span>
<span class="badge bg-light text-body position-relative">
<i class="ri-settings-4-line"></i> Settings
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-primary p-1">
<span class="visually-hidden">unread messages</span>
</span>
</span>Badges with Heading
Add badges to headings by placing a <span class="badge"> next to the heading text. This is useful for highlighting important information or counts.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6 class="mb-0">Example heading <span class="badge bg-primary">New</span></h6>Square Badges
Theme color Archive just adding class .badge
Use theme colors in badges by simply adding the .badge
<span class="badge border border-primary bg-primary">5</span> <span class="badge border border-secondary bg-secondary">5</span> <span class="badge border border-success bg-success">5</span> <span class="badge border border-info bg-info">5</span> <span class="badge border border-warning bg-warning">5</span> <span class="badge border border-danger bg-danger">5</span> <span class="badge border border-dark bg-dark">5</span> <span class="badge border border-light bg-light text-light-emphasis">5</span><span class="badge rounded-pill text-primary bg-primary-subtle">5</span> <span class="badge rounded-pill text-secondary bg-secondary-subtle">5</span> <span class="badge rounded-pill text-success bg-success-subtle">5</span> <span class="badge rounded-pill text-info bg-info-subtle">5</span> <span class="badge rounded-pill text-warning bg-warning-subtle">5</span> <span class="badge rounded-pill text-danger bg-danger-subtle">5</span> <span class="badge rounded-pill text-dark bg-dark-subtle">5</span> <span class="badge rounded-pill text-dark bg-light-subtle">5</span><span class="badge border text-primary border-primary-subtle"><i class="ri-star-line"></i></span> <span class="badge border text-secondary border-secondary-subtle"><i class="ri-mail-line"></i></span> <span class="badge border text-success border-success-subtle"><i class="ri-check-line"></i></span> <span class="badge border text-info border-info-subtle"><i class="ri-information-line"></i></span> <span class="badge border text-warning border-warning-subtle"><i class="ri-error-warning-line"></i></span> <span class="badge border text-danger border-danger-subtle"><i class="ri-close-line"></i></span> <span class="badge border text-dark border-dark-subtle"><i class="ri-lock-line"></i></span> <span class="badge border text-dark border-light-subtle"><i class="ri-settings-4-line"></i></span>