Bootstrap 5 Badges
Badges
Badges are used to add additional information to any content:
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Use the .badge class together with a
contextual class (like .bg-secondary) within <span>
elements to create rectangular badges. Note that badges scale to match the size of the
parent element (if any):
Example
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Try it Yourself »Contextual Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Use any of the contextual classes (.bg-*) to change the color of a badge:
Example
<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>
Try it Yourself »Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Use the .rounded-pill class to make the badges more round:
Example
<span class="badge rounded-pill
bg-primary">Primary</span>
<span
class="badge rounded-pill bg-secondary">Secondary</span>
<span
class="badge rounded-pill bg-success">Success</span>
<span class="badge
rounded-pill bg-danger">Danger</span>
<span class="badge
rounded-pill
bg-warning">Warning</span>
<span class="badge rounded-pill
bg-info">Info</span>
<span class="badge rounded-pill
bg-light">Light</span>
<span class="badge rounded-pill
bg-dark">Dark</span>
Try it Yourself »Badge inside an Element
An example of using a badge inside a button:
Example
<button type="button" class="btn btn-primary">
Messages <span
class="badge bg-danger">4</span>
</button>
Try it Yourself »Did You Know?
W3.CSS is an excellent alternative to Bootstrap 5.
W3.CSS is smaller, faster, and easier to use.
If you want to learn W3.CSS, go to our W3.CSS Tutorial.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.