Badges

These modular elements can be readily used and customized in every layout across pages.

For detail documentation, View Badge on Bootstrap

Contextual variations
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge my-1 badge-primary">Primary</span>
<span class="badge my-1 badge-secondary">Secondary</span>
<span class="badge my-1 badge-success">Success</span>
<span class="badge my-1 badge-info">Info</span>
<span class="badge my-1 badge-warning">Warning</span>
<span class="badge my-1 badge-danger">Danger</span>
<span class="badge my-1 badge-light">Light</span>
<span class="badge my-1 badge-dark">Dark</span>
Pill badges
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-pill my-1 badge-primary">Primary</span>
<span class="badge badge-pill my-1 badge-secondary">Secondary</span>
<span class="badge badge-pill my-1 badge-success">Success</span>
<span class="badge badge-pill my-1 badge-info">Info</span>
<span class="badge badge-pill my-1 badge-warning">Warning</span>
<span class="badge badge-pill my-1 badge-danger">Danger</span>
<span class="badge badge-pill my-1 badge-light">Light</span>
<span class="badge badge-pill my-1 badge-dark">Dark</span>
Soft badges
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge my-1 badge-soft-primary">Primary</span>
<span class="badge my-1 badge-soft-secondary">Secondary</span>
<span class="badge my-1 badge-soft-success">Success</span>
<span class="badge my-1 badge-soft-info">Info</span>
<span class="badge my-1 badge-soft-warning">Warning</span>
<span class="badge my-1 badge-soft-danger">Danger</span>
<span class="badge my-1 badge-soft-light">Light</span>
<span class="badge my-1 badge-soft-dark">Dark</span>
Soft pill badges
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-pill my-1 badge-soft-primary">Primary</span>
<span class="badge badge-pill my-1 badge-soft-secondary">Secondary</span>
<span class="badge badge-pill my-1 badge-soft-success">Success</span>
<span class="badge badge-pill my-1 badge-soft-info">Info</span>
<span class="badge badge-pill my-1 badge-soft-warning">Warning</span>
<span class="badge badge-pill my-1 badge-soft-danger">Danger</span>
<span class="badge badge-pill my-1 badge-soft-light">Light</span>
<span class="badge badge-pill my-1 badge-soft-dark">Dark</span>

Thank you for creating with Reign © 2019| v4.0.1

Made withby Themewagon