Badges

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

Badges on Bootstrap
Contextual variations
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Pill badges
Primary Secondary Success Info Warning Danger Light Dark
<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-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Soft badges
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-soft-primary">Primary</span>
<span class="badge badge-soft-secondary">Secondary</span>
<span class="badge badge-soft-success">Success</span>
<span class="badge badge-soft-info">Info</span>
<span class="badge badge-soft-warning">Warning</span>
<span class="badge badge-soft-danger">Danger</span>
<span class="badge badge-soft-light">Light</span>
<span class="badge badge-soft-dark">Dark</span>
Soft pill badges
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-pill badge-soft-primary">Primary</span>
<span class="badge badge-pill badge-soft-secondary">Secondary</span>
<span class="badge badge-pill badge-soft-success">Success</span>
<span class="badge badge-pill badge-soft-info">Info</span>
<span class="badge badge-pill badge-soft-warning">Warning</span>
<span class="badge badge-pill badge-soft-danger">Danger</span>
<span class="badge badge-pill badge-soft-light">Light</span>
<span class="badge badge-pill badge-soft-dark">Dark</span>

Start building beautiful apps

Contact

369 ape view Avenue

Brooklyn, NY

369 ape view Avenue

Mon - Fri 9am - 5pm

+91 3929 3355

Brooklyn, NY

Subscribe

Latest Shape news, articles, and resources sent straight to your inbox every month.

We’ll never share your details. See our Privacy Policy

Made With by ThemeWagon