Bootstrap 5 badges are small count or label indicators attached to elements. This page covers 4 badge patterns — basic, pill, button badges and positioned notification badges — each ready to copy directly.

Quick Setup

Badges need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.badgeRequired base class
.bg-primaryBlue badge background
.bg-successGreen badge background
.bg-dangerRed badge background
.bg-warningYellow badge (add text-dark)
.rounded-pillFully rounded pill shape
.position-relativeRequired on parent for positioned badges
.position-absolutePositions badge over parent
.top-0 .start-100Top-right corner position
.translate-middleCenters badge on the corner

1. Bootstrap 5 Basic Badges

All Bootstrap 5 badge color variants. Use inside headings, paragraphs or standalone.

2. Bootstrap 5 Pill Badges

Rounded pill badges using rounded-pill class. Common for tags, categories and status labels.

3. Bootstrap 5 Badge on Buttons

Badges inside buttons for notification counts on nav items and action buttons.

4. Bootstrap 5 Positioned Notification Badge

Badges positioned on top of icons or buttons using position utilities. Common in nav and icon buttons.

Frequently Asked Questions

Add position-relative to the button and position-absolute top-0 start-100 translate-middle to the badge. This positions the badge at the top-right corner of the button. Use rounded-pill for a circular notification badge.
Bootstrap badges inherit font size from the parent element. To change size set font-size directly on the badge: style='font-size:0.9rem'. Or place it inside a larger heading — the badge scales automatically to match the heading size.
Use an empty badge with padding: <span class='badge rounded-pill bg-danger p-1'><span class='visually-hidden'>New</span></span>. Position it on a button using position-absolute. The visually-hidden text inside keeps it accessible for screen readers.
Wrap the nav icon in a position-relative span. Add the badge with position-absolute top-0 start-100 translate-middle. Example: <span class='position-relative'><i class='bi bi-bell'></i><span class='position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger'>3</span></span>
Add a CSS animation to the badge: @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } } .badge-pulse { animation: pulse 1.5s infinite; }. Apply the badge-pulse class to any badge you want to animate.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Button Styles

View examples →

Bootstrap 5 Alert Example

View examples →

Bootstrap 5 Navbar Example

View examples →