Badges
Small count and labeling component.
Contextual variations
PrimarySecondarySuccessDangerWarningInfoLightDark
<!-- Primary badge -->
<span class="badge badge-primary">Primary</span>
<!-- Secondary badge -->
<span class="badge badge-secondary">Secondary</span>
<!-- Success badge -->
<span class="badge badge-success">Success</span>
<!-- Danger badge -->
<span class="badge badge-danger">Danger</span>
<!-- Warning badge -->
<span class="badge badge-warning">Warning</span>
<!-- Info badge -->
<span class="badge badge-info">Info</span>
<!-- Light badge -->
<span class="badge badge-light">Light</span>
<!-- Dark badge -->
<span class="badge badge-dark">Dark</span>
// Primary badge
span.badge.badge-primary Primary
// Secondary badge
span.badge.badge-secondary Secondary
// Success badge
span.badge.badge-success Success
// Danger badge
span.badge.badge-danger Danger
// Warning badge
span.badge.badge-warning Warning
// Info badge
span.badge.badge-info Info
// Light badge
span.badge.badge-light Light
// Dark badge
span.badge.badge-dark Dark
Pill badges
PrimarySecondarySuccessDangerWarningInfoLightDark
<!-- Primary badge -->
<span class="badge badge-pill badge-primary">Primary</span>
<!-- Secondary badge -->
<span class="badge badge-pill badge-secondary">Secondary</span>
<!-- Success badge -->
<span class="badge badge-pill badge-success">Success</span>
<!-- Danger badge -->
<span class="badge badge-pill badge-danger">Danger</span>
<!-- Warning badge -->
<span class="badge badge-pill badge-warning">Warning</span>
<!-- Info badge -->
<span class="badge badge-pill badge-info">Info</span>
<!-- Light badge -->
<span class="badge badge-pill badge-light">Light</span>
<!-- Dark badge -->
<span class="badge badge-pill badge-dark">Dark</span>
// Primary badge
span.badge.badge-pill.badge-primary Primary
// Secondary badge
span.badge.badge-pill.badge-secondary Secondary
// Success badge
span.badge.badge-pill.badge-success Success
// Danger badge
span.badge.badge-pill.badge-danger Danger
// Warning badge
span.badge.badge-pill.badge-warning Warning
// Info badge
span.badge.badge-pill.badge-info Info
// Light badge
span.badge.badge-pill.badge-light Light
// Dark badge
span.badge.badge-pill.badge-dark Dark
Links
<!-- Primary link badge -->
<a href="#" class="badge badge-primary">Primary</a>
<!-- Secondary link badge -->
<a href="#" class="badge badge-secondary">Secondary</a>
<!-- Success link badge -->
<a href="#" class="badge badge-success">Success</a>
<!-- Danger link badge -->
<a href="#" class="badge badge-danger">Danger</a>
<!-- Warning link badge -->
<a href="#" class="badge badge-warning">Warning</a>
<!-- Info link badge -->
<a href="#" class="badge badge-info">Info</a>
<!-- Light link badge -->
<a href="#" class="badge badge-light">Light</a>
<!-- Dark link badge -->
<a href="#" class="badge badge-dark">Dark</a>
// Primary link badge
a(href="#").badgel.badge-primary Primary
// Secondary link badge
a(href="#").badge.badge-secondary Secondary
// Success link badge
a(href="#").badge.badge-success Success
// Danger link badge
a(href="#").badge.badge-danger Danger
// Warning link badge
a(href="#").badge.badge-warning Warning
// Info link badge
a(href="#").badge.badge-pill.badge-info Info
// Light link badge
a(href="#").badge.badge-light Light
// Dark link badge
a(href="#").badge.badge-dark Dark
Inside heading
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<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>
h1
| Example heading
span.badge.badge-secondary New
h2
| Example heading
span.badge.badge-secondary New
h3
| Example heading
span.badge.badge-secondary New
h4
| Example heading
span.badge.badge-secondary New
h5
| Example heading
span.badge.badge-secondary New
h6
| Example heading
span.badge.badge-secondary New
Inside button
<!-- Button + badge -->
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light ml-1">4</span>
</button>
<!-- Pill button + pill badge -->
<button type="button" class="btn btn-pill btn-dark">
Profile <span class="badge badge-pill badge-light ml-1">9</span>
</button>
<!-- Outline button + badge -->
<button type="button" class="btn btn-outline-secondary">
Messages <span class="badge badge-success ml-1">18</span>
</button>
// Button + badge
button(type="button").btn.btn-primary
| Notifications
span.badge.badge-light.ml-1 4
// Pill button + pill badge
button(type="button").btn.btn-pill.btn-dark
| Profile
span.badge.badge-pill.badge-light.ml-1 9
// Outline button + badge
button(type="button").btn.btn-outline-secondary
| Messages
span.badge.badge-success.ml-1 18
Inside list group
<!-- Badges inside list group -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Messages
<span class="badge badge-pill badge-info">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Orders
<span class="badge badge-pill badge-warning">2</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Favourites
<span class="badge badge-pill badge-danger">6</span>
</a>
</div>
// Badges inside list group
.list-group
a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
| Messages
span.badge.badge-pill.badge-info 14
a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
| Orders
span.badge.badge-pill.badge-warning 2
a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
| Favourites
span.badge.badge-pill.badge-danger 6