Contextual variations
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
Soft
Primary
Primary Light
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-soft-primary text-primary">Primary</span>
<span class="badge bg-soft-primary-light text-primary">Primary Light</span>
<span class="badge bg-soft-secondary text-secondary">Secondary</span>
<span class="badge bg-soft-success text-success">Success</span>
<span class="badge bg-soft-danger text-danger">Danger</span>
<span class="badge bg-soft-warning text-warning">Warning</span>
<span class="badge bg-soft-info text-info">Info</span>
<span class="badge bg-soft-light text-light">Light</span>
<span class="badge bg-soft-dark text-dark">Dark</span>
Pill badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-warning rounded-pill">Warning</span>
<span class="badge bg-info rounded-pill">Info</span>
<span class="badge bg-light rounded-pill">Light</span>
<span class="badge bg-dark rounded-pill">Dark</span>
More examples
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<div class="h1">Example heading <span class="badge bg-secondary">New</span></div>
<div class="h2">Example heading <span class="badge bg-secondary">New</span></div>
<div class="h3">Example heading <span class="badge bg-secondary">New</span></div>
<div class="h4">Example heading <span class="badge bg-secondary">New</span></div>
<div class="h5">Example heading <span class="badge bg-secondary">New</span></div>
<div class="h6">Example heading <span class="badge bg-secondary">New</span></div>