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 class="btn btn btn-success-muted mr-2">Button label 
    <span class="badge badge-pill badge-outline-primary ml-2">5</span>
<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>
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 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 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