Simple Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
<h1>Heading 1 <span class="badge badge-light">New</span></h1>
<h2>Heading 2 <span class="badge badge-light">New</span></h2>
<h3>Heading 3 <span class="badge badge-light">New</span></h3>
<h4>Heading 4 <span class="badge badge-light">New</span></h4>
<h5>Heading 5 <span class="badge badge-light">New</span></h5>
<h6>Heading 6 <span class="badge badge-light">New</span></h6>
Colored Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
<h1 class="text-primary">Heading 1 <span class="badge badge-primary">New</span></h1>
<h2 class="text-danger">Heading 2 <span class="badge badge-danger">New</span></h2>
<h3 class="text-warning">Heading 3 <span class="badge badge-warning">New</span></h3>
<h4 class="text-success">Heading 4 <span class="badge badge-success">New</span></h4>
<h5 class="text-info">Heading 5 <span class="badge badge-info">New</span></h5>
<h6 class="text-secondary">Heading 6 <span class="badge badge-secondary">New</span></h6>
BADGES
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
Primary
Secondary
Success
Danger
Warning
Info
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-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>
Pill Badges
Use the .badge-pill modifier class to make badges more rounded.
Primary
Secondary
Success
Danger
Warning
Info
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-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>
Link Badges
Using the contextual badge classes on an element quickly provide actionable badges with hover and focus states.
<a class="badge badge-primary" href="#">Primary</a>
<a class="badge badge-secondary" href="#">Secondary</a>
<a class="badge badge-success" href="#">Success</a>
<a class="badge badge-danger" href="#">Danger</a>
<a class="badge badge-warning" href="#">Warning</a>
<a class="badge badge-info" href="#">Info</a>
<a class="badge badge-light" href="#">Light</a>
<a class="badge badge-dark" href="#">Dark</a>
Link Badges
Badges can be used as part of links or buttons to provide a counter.
<button type="button" class="btn btn-primary mt-1 mb-1">Primary <span class="badge badge-light">22</span></button>
<button type="button" class="btn btn-success mt-1 mb-1">Success <span class="badge badge-light">New</span></button>
<button type="button" class="btn btn-info mt-1 mb-1">Info <span class="badge badge-light">5</span></button>
<button type="button" class="btn btn-warning mt-1 mb-1">Warning <span class="badge badge-light badge-pill">
<i class="typcn typcn-input-checked-outline tx-14"></i></span></button>
<button type="button" class="btn btn-danger mt-1 mb-1">Danger <span class="badge badge-light badge-pill">Updated</span></button>