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>