Badges
35+ Badges style: soft conner, rounded, outline...
Basic Badges
Based on Bootstrap
Advance Badges
Custom style
Pill badges
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
Brand
Primary
Success
Danger
Warning
Info
Light
Secondary
Dark
<span class="badge badge-pill badge-brand">Brand</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Outline Badges
Brand
Primary
Success
Danger
Warning
Info
Dark
Secondary
<span class="badge badge-pill badge-outline-brand">Brand</span>
<span class="badge badge-pill badge-outline-primary">Primary</span>
<span class="badge badge-pill badge-outline-success">Success</span>
<span class="badge badge-pill badge-outline-danger">Danger</span>
<span class="badge badge-pill badge-outline-warning">Warning</span>
<span class="badge badge-pill badge-outline-info">Info</span>
<span class="badge badge-pill badge-outline-dark">Dark</span>
<span class="badge badge-pill badge-outline-secondary">Secondary</span>
Muted Background Badges
Brand
Primary
Success
Danger
Warning
Info
Secondary
<span class="badge badge-pill badge-muted-brand">Brand</span>
<span class="badge badge-pill badge-muted-primary">Primary</span>
<span class="badge badge-pill badge-muted-success">Success</span>
<span class="badge badge-pill badge-muted-danger">Danger</span>
<span class="badge badge-pill badge-muted-warning">Warning</span>
<span class="badge badge-pill badge-muted-info">Info</span>
<span class="badge badge-pill badge-muted-secondary">Secondary</span>
Size badges
Custom size for badges, user -sm, -md, -lg, -xl class
6
9
18
stop
Pending
Done
Disable
Ok
No
6
9
18
stop
Pending
Done
Disable
Ok
No
6
9
18
stop
Pending
Done
Disable
Ok
No
6
9
18
stop
Pending
Done
Disable
Ok
No
<span class="badge badge-sm badge-pill badge-brand">Brand</span>
<span class="badge badge-md badge-pill badge-primary">Primary</span>
<span class="badge badge-lg badge-pill badge-secondary">Secondary</span>
<span class="badge badge-xl badge-pill badge-secondary">Secondary</span>
Badges in Button
<button class="btn btn-primary mr-2">Button label
<span class="badge badge-md badge-pill badge-success ml-2">5</span>
</button>
<button class="btn btn btn-success-muted mr-2">Button label
<span class="badge badge-pill badge-outline-primary ml-2">5</span>
</button>
<button class="btn btn-outline btn-danger-outline mt-15">Button label
<span class="badge badge-md badge-pill badge-brand ml-2">6</span>
</button>
Rounded button badges
<button class="btn btn-rounded btn-badge-circle btn-brand mr-2">
<span class="badge badge-circle badge-xl badge-pill badge-muted-brand mr-2">8</span>Version 8.0
</button>
<button class="btn btn-rounded btn-badge-circle btn-success-muted mr-2">
<span class="badge badge-circle badge-xl badge-pill badge-success mr-2">2</span>Version 8.0
</button>
<button class="btn btn-outline btn-rounded btn-badge-circle btn-primary-muted mr-2 mt-15">
<span class="badge badge-circle badge-xl badge-pill badge-primary mr-2">6</span>Version 8.0
</button>