Code
.badge
.rounded-pill
.position-relative
.position-absolute
.translate-middle
.rounded-circle
Definitions
- Badge
- ▪ Adds a button-like box to text.
- Pill
- ▪ Changes border-radius to make element look like a pill.
- Relative Position
- ▪ Positioned relative to its normal position. Other content will not be adjusted to fit into any gap left.
- Absolute Position
- ▪ Positioned relative to the nearest ancestor. Can overlap other elements.
- Translate Middle
- ▪ Applies translateX (-50%) and translateY(-50%) allowing you to absolute center an element.
- Rounded Circle
- ▪ Creates a circle.
Key Points
- Badges scale to the size of the immediate parent.
- In Bootstrap 5, badges no longer have focus or hover styles for links.
- Badges my be confusing for screen readers. Consider using additional context with a visually hidden piece of additional text.