logo logo-dark
AB
AB
Hospital Manegment
Dashboards
Apps
Pages
Misc Pages
Error Pages
Components
logo logo-dark
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 bg-md bg-primary">Primary</span>