Bootstrap Badge

The outer container — here a <button> — that the badge is attached to. Bootstrap does not define a formal wrapper; the badge is typically an inline child of its host element.

The host element provides the positioning context (position: relative) when the badge is used in "counter" mode.

The host element's visible text. In a button, this is the button label. The badge visually modifies the label's meaning (e.g. "Messages" + "4 unread").

The .badge element itself. A <span> with display: inline-flex, white-space: nowrap, border-radius, and a contextual background.

For counters, add a visually hidden <span class="visually-hidden"> inside the badge to provide context for screen readers — e.g. "4 unread messages" rather than just "4".

A .visually-hidden (or .visually-hidden-focusable) span inside or adjacent to the badge that provides context for assistive technology.

Bootstrap's .visually-hidden applies a CSS-clip technique: the element is 1×1px and clipped, remaining in the accessibility tree without affecting visual layout.