Dr. Codex Lantern
drlantern@dedemao.com
Language
Badges Small and adaptive tag for adding context to just about any content.
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
Learn more about this component on bootstrap's official documentation.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.sr-onlyclass.Learn more about this component on bootstrap's official documentation.
Badge scaling
Badges scale to match the size of the immediate parent element by using relative font sizing and
emunits
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badge in buttons
Badges scale to match the size of the immediate parent element by using relative font sizing and
emunits
Regular buttons
Outline buttons
Status badges
These badges are unique and triggered by wrapping an element with
.statusclass. Comes with two badge sizes .status-smand the default .status. Comes in 3 colors, .status-danger, .status-warning, and .status-success
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Default
PrimarySecondarySuccessDangerWarningInfoLightDark
Border utility
PrimarySecondarySuccessDangerWarningInfoLightDark
Pill badges
Use the
.badge-pillmodifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
PrimarySecondarySuccessDangerWarningInfoLightDark
Links example
Add
.badge-*class on a hyperlink element to convert it to actionable badges with hover and focus states
Nested badge
Use the included color utilitiesto change background and text colors. Below are examples of nested badge with different background colors
Nested Badge 1Nested Badge 299+
Badge header
We use
.badge-iconwith a combination of other utility classes to create a link badge. This class will auto turncate overflow giving you a nice clean look without any hassle