logo logo-dark

Do you know the latest update of 2022? A overview of our is now available on YouTube
Components

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 Reference Details
.bg-{state} Use {state} as primary, secondary, success, info, warning, danger, dark, gray, light
.bg-outline-{state} Same as above {state}
.rounded-pill Use 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 Reference Details
.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>
© 2022 DashLite. Template by Softnio