Badge
Badge.
Make use of Bootstrap's unique Badge styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Badge on BootstrapBadge
Badges Size
Default Bootstrap Badges
Primary
Primary
Secondary
Danger
Warning
<div class="bootstrap-badge">
<span class="badge badge-xs light badge-primary">Primary</span>
<span class="badge badge-sm light badge-primary">Primary</span>
<span class="badge light badge-secondary">Secondary</span>
<span class="badge badge-lg light badge-danger">Danger</span>
<span class="badge badge-xl light badge-warning">Warning</span>
</div> Badges Light
Default Bootstrap Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1
2
3
4
5
6
7
8
<div class="bootstrap-badge">
<span class="badge light badge-primary">Primary</span>
<span class="badge light badge-secondary">Secondary</span>
<span class="badge light badge-success">Success</span>
<span class="badge light badge-danger">Danger</span>
<span class="badge light badge-warning">Warning</span>
<span class="badge light badge-info">Info</span>
<span class="badge light badge-light">Light</span>
<span class="badge light badge-dark">Dark</span>
</div>
<div class="bootstrap-badge">
<span class="badge light badge-primary">1</span>
<span class="badge light badge-secondary">2</span>
<span class="badge light badge-success">3</span>
<span class="badge light badge-danger">4</span>
<span class="badge light badge-warning">5</span>
<span class="badge light badge-info">6</span>
<span class="badge light badge-light">7</span>
<span class="badge light badge-dark">8</span>
</div>
Badges
Default Bootstrap Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div class="bootstrap-badge">
<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>
</div>Pill Badge
add .badge-pill to change the style
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
<div class="bootstrap-badge">
<span class="badge badge-pill badge-primary">Pill badge</span>
<span class="badge badge-pill badge-secondary">Pill badge</span>
<span class="badge badge-pill badge-success">Pill badge</span>
<span class="badge badge-pill badge-danger">Pill badge</span>
<span class="badge badge-pill badge-warning">Pill badge</span>
<span class="badge badge-pill badge-info">Pill badge</span>
<span class="badge badge-pill badge-light">Pill badge</span>
<span class="badge badge-pill badge-dark">Pill badge</span>
</div>
Link Badge
Link badge add in anchor tag
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-primary">Links</a>
<a href="javascript:void(0)" class="badge badge-secondary">Links</a>
<a href="javascript:void(0)" class="badge badge-success">Links</a>
<a href="javascript:void(0)" class="badge badge-danger">Links</a>
<a href="javascript:void(0)" class="badge badge-warning">Links</a>
<a href="javascript:void(0)" class="badge badge-info">Links</a>
<a href="javascript:void(0)" class="badge badge-light">Links</a>
<a href="javascript:void(0)" class="badge badge-dark">Links</a>
</div>Rounded Badge
add .badge-rounded to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-rounded badge-primary">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-secondary">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-success">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-danger">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-warning">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-info">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-light">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-dark">Rounded</a>
</div>Rounded Outline Badge
add .badge-rounded to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-primary">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-secondary">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-success">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-danger">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-warning">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-info">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-light">Rounded</a>
<a href="javascript:void(0)" class="badge badge-rounded badge-outline-dark">Rounded</a>
</div>Outline Circle Badge
add .badge-circle to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-circle badge-outline-primary">1</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-secondary">2</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-success">3</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-danger">4</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-warning">5</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-info">6</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-light">7</a>
<a href="javascript:void(0)" class="badge badge-circle badge-outline-dark">8</a>
</div>Circle Badge
add .badge-circle to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-circle badge-primary">1</a>
<a href="javascript:void(0)" class="badge badge-circle badge-secondary">2</a>
<a href="javascript:void(0)" class="badge badge-circle badge-success">3</a>
<a href="javascript:void(0)" class="badge badge-circle badge-danger">4</a>
<a href="javascript:void(0)" class="badge badge-circle badge-warning">5</a>
<a href="javascript:void(0)" class="badge badge-circle badge-info">6</a>
<a href="javascript:void(0)" class="badge badge-circle badge-light">7</a>
<a href="javascript:void(0)" class="badge badge-circle badge-dark">8</a>
</div>Circle Badge Default
Default bootstrap outline baadge
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-outline-primary">1</a>
<a href="javascript:void(0)" class="badge badge-outline-secondary">2</a>
<a href="javascript:void(0)" class="badge badge-outline-success">3</a>
<a href="javascript:void(0)" class="badge badge-outline-danger">4</a>
<a href="javascript:void(0)" class="badge badge-outline-warning">5</a>
<a href="javascript:void(0)" class="badge badge-outline-info">6</a>
<a href="javascript:void(0)" class="badge badge-outline-light">7</a>
<a href="javascript:void(0)" class="badge badge-outline-dark">8</a>
</div>Number Badge
Default bootstrap outline baadge
<div class="card-body">
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-primary">1</a>
<a href="javascript:void(0)" class="badge badge-secondary">2</a>
<a href="javascript:void(0)" class="badge badge-success">3</a>
<a href="javascript:void(0)" class="badge badge-danger">4</a>
<a href="javascript:void(0)" class="badge badge-warning">5</a>
<a href="javascript:void(0)" class="badge badge-info">6</a>
<a href="javascript:void(0)" class="badge badge-light">7</a>
<a href="javascript:void(0)" class="badge badge-dark">8</a>
</div>
</div>Badge Sizes
add .badge-xs .badge-sm .badge-md .badge-lg
.badge-xl to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-xs badge-primary">xs</a>
<a href="javascript:void(0)" class="badge badge-sm badge-secondary">sm</a>
<a href="javascript:void(0)" class="badge badge-md badge-success">md</a>
<a href="javascript:void(0)" class="badge badge-lg badge-danger">lg</a>
<a href="javascript:void(0)" class="badge badge-xl badge-warning">xl</a>
</div>Positioned Badges
add .position-relative to change the style
<div class="bootstrap-badge">
<a href="javascript:void(0)" class="badge badge-primary position-relative me-4">Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-secondary position-relative me-4">Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">
99+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-success position-relative me-4">Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">
99+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-warning position-relative me-4">1
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-info position-relative me-4">2
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-light position-relative me-4">3
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</a>
<a href="javascript:void(0)" class="badge badge-dark position-relative me-4">4
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</a>
</div>Badge With Button
add .btn to change the style
<div class="bootstrap-badge">
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-dark mb-0">1</span>
</button>
<button type="button" class="btn btn-secondary">
Notifications <span class="badge text-bg-dark mb-0">2</span>
</button>
<button type="button" class="btn btn-success">
Notifications <span class="badge text-bg-dark mb-0">3</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge text-bg-dark mb-0">4</span>
</button>
</div>