Default Bootstrap Badges

Primary Secondary Success Danger Warning Info Light Dark

span.badge.bg-primary.text-white.me-2 Primary
span.badge.bg-secondary.text-white.me-2 Secondary
span.badge.bg-success.me-2 Success
span.badge.bg-danger.me-2 Danger
span.badge.bg-warning.me-2 Warning
span.badge.bg-info.me-2 Info
span.badge.bg-light.text-body.me-2 Light
span.badge.bg-dark.me-2 Dark

By default, Bootstrap includes the above badges. The styling for these default badges has been modified to fit the SB Admin Pro theme.

Extended Badges

Red Orange Yellow Green Teal Cyan Blue Indigo Purple Pink

HTML
PUG

span.badge.bg-red Red
span.badge.bg-orange Orange
span.badge.bg-yellow Yellow
span.badge.bg-green Green
span.badge.bg-teal Teal
span.badge.bg-cyan Cyan
span.badge.bg-blue Blue
span.badge.bg-indigo Indigo
span.badge.bg-purple Purple
span.badge.bg-pink Pink

The above non-contextual badge styles are custom made for the SB Admin Pro theme!

Badge Sizing

Example Heading New

This is an example paragraph with a badge at the end! New

HTML
PUG

h1 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
h2 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
h3 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
h4 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
h5 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
h6 Example Heading
    span.badge.bg-primary.text-white.ms-2 New
p This is an example paragraph with a badge at the end!
    span.badge.bg-primary.text-white.ms-2 New
button.btn.btn-primary.me-2 Messages
    span.badge.bg-white.text-dark.ms-2 5
button.btn.btn-secondary.me-2 Notifications
    span.badge.bg-white.text-dark.ms-2 3
button.btn.btn-warning Alerts
    span.badge.bg-white.text-dark.ms-2 7

Badge sizing is set using em units, which means they will adapt to the font size of their immediate parent. The above examples show the badge size adapting to the parent, including the badge used within the button element.

Default
Extended
Sizing