LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Badge

Documentation and examples for badges, our small count and labeling component.

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge badge-pill badge-primary mr-5 mt-4">Primary</span>
<span class="badge badge-pill badge-secondary mr-5 mt-4">Secondary</span>
<span class="badge badge-pill badge-success mr-5 mt-4">Success</span>
<span class="badge badge-pill badge-danger mr-5 mt-4">Danger</span>
<span class="badge badge-pill badge-warning mr-5 mt-4">Warning</span>
<span class="badge badge-pill badge-info mr-5 mt-4">Info</span>
<span class="badge badge-pill badge-light mr-5 mt-4">Light</span>
<span class="badge badge-pill badge-dark mr-5 mt-4">Dark</span>

Contextual variations Badge

Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge badge-primary mr-5 mt-4">Primary</span> 
<span class="badge badge-secondary mr-5 mt-4">Secondary</span>
<span class="badge badge-success mr-5 mt-4">Success</span> 
<span class="badge badge-danger mr-5 mt-4">Danger</span> 
<span class="badge badge-warning mr-5 mt-4">Warning</span>
<span class="badge badge-info mr-5 mt-3">Info</span> 
<span class="badge badge-light mr-5 mt-4">Light</span> 
<span class="badge badge-dark mr-5 mt-4">Dark</span>

Contextual variations Badge With Link

Primary Secondary Success Danger Warning Info Light Dark 
<a href="#" class="badge badge-primary mr-5 mt-4">Primary</a>
<a href="#" class="badge badge-secondary mr-5 mt-4">Secondary</a>
<a href="#" class="badge badge-success mr-5 mt-4">Success</a>
<a href="#" class="badge badge-danger mr-5 mt-4">Danger</a>
<a href="#" class="badge badge-warning mr-5 mt-4">Warning</a>
<a href="#" class="badge badge-info mr-5 mt-4">Info</a>
<a href="#" class="badge badge-light mr-5 mt-4">Light</a>
<a href="#" class="badge badge-dark mr-5 mt-4">Dark</a>