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
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?