Badges

Documentation and examples for badges, our small count and labeling component.

Example with Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Pill Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Outline Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Outline Pill Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Class ReferenceDetails
.bg-{state}Use {state} as primary, secondary, success, info, warning, danger, dark, gray, light
.bg-outline-{state}Same as above {state}
.rounded-pillUse with .rounded class rounded badge style.
Code Example
<span class="badge bg-primary">...</span><span class="badge bg-outline-primary">...</span>
Code Example
<span class="badge rounded-pill bg-primary">...</span><span class="badge rounded-pill bg-outline-primary">...</span>
Dot Style

Use the .badge-dot modifier class to make dot style badges.

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Code Example
<span class="badge badge-dot bg-primary">Primary</span>
Dim/Pale Style

Use the .badge-dim modifier class to make soft light / pale color badges.

Pale Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Pale Pill Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Pale Bordered Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Pale Bordered Pill Style
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
  • Gray
  • Light
Code Example
<span class="badge badge-dim bg-primary">Primary</span><span class="badge badge-dim rounded-pill bg-primary">Primary</span>
Code Example
<span class="badge badge-dim bg-outline-primary">Primary</span><span class="badge badge-dim rounded-pill bg-outline-primary">Primary</span>
Badge Size

Use the .badge-{size} modifier class to control badge sizes.

Default Style
  • Primary
  • Primary
  • Primary
  • Primary
  • Primary
Pill Style
  • Primary
  • Primary
  • Primary
  • Primary
  • Primary
Class ReferenceDetails
.badge-{size}Use {size} as sm, md, lg, xl
Code Example
<span class="badge badge-md bg-primary">Primary</span>
Code Example
<span class="badge rounded-pill badge-md bg-primary">Primary</span>
Switch Demo Layout
Use Case Concept
Preview Settings
Main UI Style
Default
Clean
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Looking for Coronavirus Real & Live Data Tracking Dashboard? Check out
CovStats
Looking for Coronavirus
Live Data Dashboard?