Use .badge for compact labels, counts, and status hints that belong to nearby text or controls. Place it next to the heading, item label, button, or row it describes; Bootstrap sizes badges with relative font sizing and em units, so the badge naturally follows the scale of its immediate parent.
Use .text-bg-* variants when the badge needs a semantic color with matching foreground contrast, and use .rounded-pill when the label should read as a softer pill. Keep badge text short, reserve strong variants for meaningful states, and avoid using color alone to explain the status.
For counters on buttons or positioned corner indicators, make the surrounding label carry most of the meaning. If the badge only contains a number, symbol, or dot, add extra context with .visually-hidden so assistive technologies hear the full meaning instead of an isolated value.