Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

HTML Code for this Element

<h1>Example heading <span class="badge bg-primary mb-4">New</span></h1>
<h2>Example heading <span class="badge bg-success mb-4">New</span></h2>
<h3>Example heading <span class="badge bg-danger mb-4">New</span></h3>
<h4>Example heading <span class="badge bg-warning mb-4">New</span></h4>
<h5>Example heading <span class="badge bg-info mb-4">New</span></h5>
<h6>Example heading <span class="badge bg-secondary mb-4">New</span></h6>

Badges on Buttons

Easily highlight new or unread items by adding a .badge class to links, Bootstrap navs, and more.

HTML Code for this Element

<button type="button" class="btn btn-warning">
	Notifications <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-dark">
	Messages <span class="badge bg-primary">4</span>
</button>

Positioned Badges

Use utilities to modify a .badge and position it in the corner of a link or button.

HTML Code for this Element

<button type="button" class="btn btn-success position-relative">
	Notifications
	<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
		99+
		<span class="visually-hidden">unread messages</span>
	</span>
</button>

<button type="button" class="btn btn-danger position-relative mx-3">
	<i class="bi bi-bell pe-1"></i>
	Notifications
	<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-dark">
		5
		<span class="visually-hidden">unread messages</span>
	</span>
</button>
<button type="button" class="btn btn-warning position-relative">
		<i class="bi bi-grid pe-1"></i>
		Dashboard
		<span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle">
			<span class="visually-hidden">New alerts</span>
		</span>
	</button>

Background Colors

Use the .bg-* utilities to quickly set the background-color of an element and the .text-* utilities to set the color of the text.

Primary Secondary Success Danger Warning Info Light Dark

HTML Code for this Element

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Pill Badges

Use the .rounded-pill utility to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark

HTML Code for this Element

<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-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>