Badges

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Badges

.badge & .badge-{color} = .badge-{primary, secondary, success, danger, warning, info, light, alert}

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Nested Badges

<button> .btn .btn-{color} & <span> .badge .badge-{color}

Badge Colors

.badge & .badge-{color} = .badge-{primary, secondary, success, danger, warning, info, light, alert}
Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

.badge-pill
Primary Secondary Success Danger Warning Info Light Dark

Badge Links

<a> & .badge .badge-{color} = .badge-{primary, secondary, success, danger, warning, info, light, alert}
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark