Badge — Reference
Badge settings and behavior. Settings include ID, Class, Badge, Position.
Small label/count badge. Use to display counts or labels next to text; choose variant and optional pill/rounded style.
General
Section titled “General”| Name | Description |
|---|---|
| ID | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Default: "". Attribute: id. |
| Class | Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Default: "". Attribute: class. |
| Badge | Badge text content. Sets the text displayed inside the badge. Keep badge labels short (counts, statuses) so they don't dominate the UI. Bootstrap docs: Badge |
| Position | Badge position helper. Controls how the badge is positioned relative to its parent. Positioned badges often use positioning utilities (like position-absolute ) combined with translate-middle . Bootstrap docs: Positioned badges Options: Default, Prefix (first), Suffix (last) Default: "". |
| Style | Options: Default, Primary (bg-primary), Secondary (bg-secondary), Success (bg-success), Danger (bg-danger), Warning (bg-warning), Info (bg-info), Light (bg-light), Dark (bg-dark), Link (bg-link), Primary Outline (bg-outline-primary), Secondary Outline (bg-outline-secondary), Success Outline (bg-outline-success), Danger Outline (bg-outline-danger), Warning Outline (bg-outline-warning), Info Outline (bg-outline-info), Light Outline (bg-outline-light), Dark Outline (bg-outline-dark), Link Outline (bg-outline-link) Default: "". |
| Pill | Makes the badge pill-shaped. Makes the badge pill-shaped. This typically applies rounded-pill . Bootstrap docs: Pill badges Default: false. |