Developer Tools Snippets Nav Bars Columns Modals Email Cleanup Debugger Components Documents
Daily Generator Token Meter Your counter starts at 0 each day.
0 / 25,000 daily meter
PHP & Bootstrap Developer Tool

Bootstrap Badges & Labels

Add counts, statuses, notifications, and compact labels to buttons and interface elements.

Basic Badges
Use badges for short labels, categories, versions, and other compact information.
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge bg-primary text-white">Primary</span>
<span class="badge bg-success text-white">Success</span>
<span class="badge bg-danger text-white">Danger</span>
Pill Badges
Use rounded-pill when you want a softer notification or category style.
New Active Pending Urgent Archived 
<span class="badge rounded-pill bg-primary text-white">New</span>
<span class="badge rounded-pill bg-success text-white">Active</span>
Notification Counts
Position a badge on a button to show counts without adding extra layout space.
<button type="button" class="btn btn-primary position-relative">
  Visitors
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">25</span>
</button>
Status Indicators
Small circular indicators work well for unread items, account status, and alerts.
<button type="button" class="btn btn-outline-secondary position-relative">
  Account
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle"></span>
</button>
Badge Sizes
Badges inherit font sizing, so they can scale naturally with the surrounding interface.
XS Small Medium Large XL 
<span class="badge bg-primary text-white" style="font-size: .70rem;">XS</span>
<span class="badge bg-primary text-white" style="font-size: 1rem;">Medium</span>
<span class="badge bg-primary text-white" style="font-size: 1.45rem;">XL</span>
Badges Inside Headings
A badge can sit directly beside a heading to identify something new or updated.

Dashboard New

Account Settings Updated

<h3>Dashboard <span class="badge bg-secondary text-white">New</span></h3>
<h4>Account Settings <span class="badge bg-success text-white">Updated</span></h4>
Badges Inside Buttons
Inline counts are useful for inboxes, carts, downloads, and other actions.
<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-light text-dark ms-1">9</span>
</button>
Last Updated: October 3, 2026