English
Spanish
French
German
Chinese
Arabic
Badges
Default Badges
In Bootstrap, you can create default badges by utilizing the .badge class. To customize the appearance of your badges, simply add color classes such as .bg-primary, .bg-secondary, and others to style them according to your design needs.
To create a badge with a primary background and a rounded pill shape, use the following Bootstrap classes: .badge, .bg-primary, and .rounded-pill.
<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-info">Info</span> <span class="badge bg-warning">Warning</span> <span class="badge bg-danger">Danger</span> <span class="badge bg-dark">Dark</span> <span class="badge bg-light text-body">Light</span><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-info rounded-pill">Info</span> <span class="badge bg-warning rounded-pill">Warning</span> <span class="badge bg-danger rounded-pill">Danger</span> <span class="badge bg-dark rounded-pill">Dark</span> <span class="badge bg-light rounded-pill text-body">Light</span>
Light Badges
To create Light badges in Bootstrap, utilize the .badge class. You can enhance the appearance of your badges by applying color classes such as .bg-primary-subtle, .badge-secondary-subtle etc.
To create a stylish badge with a primary color background and a rounded pill shape, you can utilize the .badge, .bg-primary-subtle, and .rounded-pill classes.
<span class="badge bg-primary-subtle text-primary">Primary</span> <span class="badge bg-secondary-subtle text-secondary">Secondary</span> <span class="badge bg-success-subtle text-success">Success</span> <span class="badge bg-info-subtle text-info">Info</span> <span class="badge bg-warning-subtle text-warning">Warning</span> <span class="badge bg-danger-subtle text-danger">Danger</span> <span class="badge bg-dark-subtle text-body">Dark</span> <span class="badge bg-light-subtle text-body text-body">Light</span><span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span> <span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span> <span class="badge rounded-pill bg-success-subtle text-success">Success</span> <span class="badge rounded-pill bg-info-subtle text-info">Info</span> <span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span> <span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span> <span class="badge rounded-pill bg-dark-subtle text-body">Dark</span> <span class="badge rounded-pill bg-light-subtle text-body text-body">Light</span>
Outline Badges
Use default badges in Bootstrap with the .badge class. Add color classes like .border, .border-*, etc., to style the badge.
Create a badge with a primary background and rounded pill shape using .badge, .border, .border-* and .rounded-pill classes.
<span class="badge border border-primary text-primary">Primary</sp> <span class="badge border border-secondary text-secondary">Secondary</span> <span class="badge border border-success text-success">Success</span> <span class="badge border border-info text-info">Info</span> <span class="badge border border-warning text-warning">Warning</span> <span class="badge border border-danger text-danger">Danger</span> <span class="badge border border-dark text-body">Dark</span> <span class="badge border border-light text-body">Light</span><span class="badge rounded-pill border border-primary text-primary">Primary</span> <span class="badge rounded-pill border border-secondary text-secondary">Secondary</span> <span class="badge rounded-pill border border-success text-success">Success</span> <span class="badge rounded-pill border border-info text-info">Info</span> <span class="badge rounded-pill border border-warning text-warning">Warning</span> <span class="badge rounded-pill border border-danger text-danger">Danger</span> <span class="badge rounded-pill border border-dark text-body">Dark</span> <span class="badge rounded-pill border border-light text-body">Light</span>
Button Badges
Add a badge to a Bootstrap button by placing a <span class="badge"> inside the button. This is great for showing counts or notifications on the button.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-success ms-1">4</span>
</button>
<button type="button" class="btn btn-success">
Messages <span class="badge bg-danger ms-1">2</span>
</button>
<button type="button" class="btn btn-outline-secondary">
Draft <span class="badge bg-success ms-1">2</span>
</button>Button Position Badges
Position badges on Bootstrap buttons by placing a <span class="badge position-absolute"> inside the button. Use utility classes like .top-0 and .end-0 to adjust the badge position.
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+9 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-primary position-relative p-0 icon-btn rounded">
<i class="ri-mail-fill"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-notification-4-fill"></i>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-menu-line"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</button>Badges with Heading
Add badges to headings by placing a <span class="badge"> next to the heading text. This is useful for highlighting important information or counts.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6 class="mb-0">Example heading <span class="badge bg-primary">New</span></h6>Square Badges
Theme color Archive just adding class .badge
<span class="badge border border-primary bg-primary">5</span> <span class="badge border border-secondary bg-secondary">5</span> <span class="badge border border-success bg-success">5</span> <span class="badge border border-info bg-info">5</span> <span class="badge border border-warning bg-warning">5</span> <span class="badge border border-danger bg-danger">5</span> <span class="badge border border-dark bg-dark">5</span> <span class="badge border border-light bg-light text-light-emphasis">5</span><span class="badge border text-primary border-primary-subtle bg-primary-subtle">5</span> <span class="badge border text-secondary border-secondary-subtle bg-secondary-subtle">5</span> <span class="badge border text-success border-success-subtle bg-success-subtle">5</span> <span class="badge border text-info border-info-subtle bg-info-subtle">5</span> <span class="badge border text-warning border-warning-subtle bg-warning-subtle">5</span> <span class="badge border text-danger border-danger-subtle bg-danger-subtle">5</span> <span class="badge border text-dark border-dark-subtle bg-dark-subtle">5</span> <span class="badge border text-dark border-light-subtle bg-light-subtle">5</span>