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>