--- layout: default title: "Badges - Sleek Admin Dashboard Template" bodyClass: "header-fixed sidebar-fixed sidebar-dark header-light" parent: "ui-elements" sub_parent: "components" activePage: "badge" ---

# Badges

{%- include breadcrumb.htm -%}

## Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Read bootstrap documentaion for more details.

# Heading New

## Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a badge. Read bootstrap documentaion for more details.

Primary Secondary Success Danger Warning Info Dark

## Pill Badges

Use the `.badge-pill` modifier class to make badges more rounded. Read bootstrap documentaion more details.

Primary Secondary Success Danger Warning Info Dark