Use the badge class to show a default badge.

Use the .rounded-pill to create a soft badge more rounded.

Use the badge-soft- class to create a softer badge.

Use the rounded-pill badge-soft- to create a soft badge more rounded

Use the badge-outline- to create a badge with the outline.

Use the rounded-pill badge-outline- class to create a outline pill badge.

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

A badge labels a thing; a .chip annotates one — a timestamp, a trend, a priority. It is lighter than a badge and sits inline beside a title. Add .chip-soft for the tinted pill and a tone class for colour.

Squared corners read as a priority or status stamp, and .chip-lg / .chip-sm adjust the scale.

Without .chip-soft a chip is transparent, so it works as plain inline meta — including a chart legend, where a bare <i> becomes a swatch.

A .status-dot marks state without taking a word to do it. It inherits currentcolor by default, so it also works inside coloured text.

Sizes run .status-dot-sm to .status-dot-lg; .status-dot-square turns it into a legend swatch and .status-dot-pulse marks anything reporting live.

The one accent-driven filled label in the template — status, category, subject, discount and inbox tags are all this component. Colour comes from --accent / --accent-soft, so set accent-* on the badge or any ancestor and it follows; there is no class per colour and no page-specific variant.

A leading glyph is markup, not a variant — .d-inline-flex and .align-items-center are all it takes, and the component sizes the icon itself. .badge-tag-dot swaps the glyph for a status dot.

Three densities: the default for panel headers and card footers, .badge-tag-sm for the category label above a card title, .badge-tag-xs for a dense inbox or table row.

Because the colour is inherited, a section recolours every badge beneath it with one class. All three of these read the same accent-purple declared on the row.

The bordered tag that carries a record's secondary facts inside a list row: a channel, a template type, a language. Quieter than the accent tag because it stays on the page's own greys instead of taking a colour. Six pages had drawn this for themselves; .badge-meta is now the only one.

The bordered pill that reports a record's state at the end of a list row. .badge-status-lg is the roomier step for card headers; .badge-status-strong darkens the label where the pill is the row's primary content rather than an aside.

Seven pages drew this pill byte for byte; the geometry now lives here once. Those pages keep their own class name only because each carries a different state palette — .is-draft is one colour on a form field and another on a broadcast.

The chip counterpart to .badge-meta: fully rounded and filled with the page surface rather than the grey, for facts that sit beside a name instead of inside a list row. .meta-chip carries a record's secondary facts beside its name — an ID, a term, a portal state. It reads quieter than a badge because the fill stays on the page surface and only the border draws the shape.

Without an icon it works as a plain inline fact.

A percentage badge closing a bar. The badge is the accent tag and the bar is Bootstrap's .progress, so the pair needs no component of its own — the shared accent keeps both in the same colour.

Priority flags name a fixed scale instead of following an accent, so each level keeps its own colour wherever it appears.

.notification-dot is a badge with a state but no content — the unread marker on an inbox row, a tab or a menu item. Add .notification-dot-accent where the list already recolours row by row.

For a count rather than a state, Bootstrap's pill badge carries the number.

.rounded-pill works on any badge in the family. The meta chip is already fully rounded, so a pill row can mix the two without them reading as different shapes.

Every badge in the family answers to the same set of states, so a page never needs a one-off. Nothing below carries inline CSS — the icon, the avatar and the spacing are all Bootstrap utilities on top of the component class.

Default

Enrolled

With icon

Enrolled

With avatar

Emma Daniel

Soft

Enrolled

Accent

Enrolled

Notification

Enrolled

Disabled

Enrolled

Long text

Enrolled in Grade 4 · Section A · Roll 12

Long labels wrap by default; drop .text-nowrap to let a badge run to two lines, or add .text-truncate with .mw-100 to clip it to the column instead.

.badge-disabled drains the colour and dims the label rather than restyling it, so a disabled badge still reads as the badge it was. One modifier covers every family.

Every badge here is built from theme variables rather than fixed colours, so dark mode needs no variant. The panel below sets data-bs-theme="dark" on itself and the same markup re-reads its surfaces and tints.

No badge in the family sets a physical left or right — spacing is gap and the leading dot is a flex child — so the icon, the dot and the label reorder on their own under dir="rtl". Use the logical .ms-* / .me-* utilities rather than fixed-side margins when a badge needs its own offset.