Badge Simple component

Badge component

This component displays a badge containing a text. You can also specify a color. Badges can have rounded or rectangular edges. See the JBStrap showcase for an example.

Supported events:

Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, Drag&Drop

Style customization

Name Default value Derived value Computed value Comment
$badge-font-size 100% 100% Badge font size.
$badge-font-weight $font-weight-bold $badge-font-weight-->$font-weight-bold-->700 700 Badge font weight.
$badge-padding-y 0.25rem 0.25rem Badge padding y.
$badge-padding-x 0.4rem 0.4rem Badge padding x.
$badge-border-radius $border-radius $badge-border-radius-->$border-radius-->0.25rem 0.25rem Badge border radius.
$badge-transition $btn-transition $badge-transition-->$btn-transition-->color .15s color .15s Badge transition.
$badge-focus-width $input-btn-focus-width $badge-focus-width-->$input-btn-focus-width-->0.2rem 0.2rem Badge focus width.
$badge-pill-padding-x 0.6em 0.6rem Badge pill padding x.
$badge-pill-border-radius 10rem 0.6rem Badge pill border radius.

Related pages