Badges
Badges
Default
Primary
Success
Danger
Info
Warning
gradient Badges
Default
Primary
Success
Danger
Info
Warning
Pill Badges
Default
Primary
Success
Danger
Info
Warning
gradient Pill Badges
Default
Primary
Success
Danger
Info
Warning
Buttons with Badges
Link Badges
Badges can be used as part of links or buttons to provide a counter.
Simple Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Colored Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Contextual variations
Default
Primary
Success
Info
Warning
Danger
<span class="badge badge-default">Default</span>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>Pill Badges
Default
Primary
Success
Info
Warning
Danger
<span class="badge rounded-pill badge-default">Default</span>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>