copy code
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Purple
Indigo
Pink
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Purple
Indigo
Pink
copy code
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Purple
Indigo
Pink
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Purple
Indigo
Pink
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
view code
<!-- default badges -->
<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-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-indigo">Indigo</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-pink">Pink</span>
<!-- default pill badges -->
<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>
<span class="badge badge-pill badge-indigo">Indigo</span>
<span class="badge badge-pill badge-purple">Purple</span>
<span class="badge badge-pill badge-pink">Pink</span>
<!-- soft badges -->
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-danger">Danger</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-light">Light</span>
<span class="badge badge-soft badge-dark">Dark</span>
<span class="badge badge-soft badge-indigo">Indigo</span>
<span class="badge badge-soft badge-purple">Purple</span>
<span class="badge badge-soft badge-pink">Pink</span>
<!-- soft pill badges -->
<span class="badge badge-soft badge-pill badge-primary">Primary</span>
<span class="badge badge-soft badge-pill badge-secondary">Secondary</span>
<span class="badge badge-soft badge-pill badge-success">Success</span>
<span class="badge badge-soft badge-pill badge-danger">Danger</span>
<span class="badge badge-soft badge-pill badge-warning">Warning</span>
<span class="badge badge-soft badge-pill badge-info">Info</span>
<span class="badge badge-soft badge-pill badge-light">Light</span>
<span class="badge badge-soft badge-pill badge-dark">Dark</span>
<span class="badge badge-soft badge-pill badge-indigo">Indigo</span>
<span class="badge badge-soft badge-pill badge-purple">Purple</span>
<span class="badge badge-soft badge-pill badge-pink">Pink</span>
<!-- button -->
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
<!-- button : badge absolute right -->
<button type="button" class="btn btn-primary position-relative">
Notifications <span class="badge badge-danger position-absolute right-0 mt--n4 mr--n4 rounded-circle">7</span>
</button>
<!-- button : badge absolute left -->
<button type="button" class="btn btn-primary position-relative">
Notifications <span class="badge badge-danger position-absolute left-0 mt--n4 ml--n4 rounded-circle">2</span>
</button>
<!-- button : badge absolute : rounded -->
<button type="button" class="btn btn-secondary btn-sm rounded-circle">
<i class="fi fi-envelope-2"></i>
<span class="badge badge-danger position-absolute right-0 mt--n2 mr--n2 rounded-circle">2</span>
</button>
<!-- headings -->
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>