Badges
Add contextual labels to text within your project
Default Bootstrap Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
PUG
<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>span.badge.badge-primary.mr-2 Primary
span.badge.badge-secondary.mr-2 Secondary
span.badge.badge-success.mr-2 Success
span.badge.badge-danger.mr-2 Danger
span.badge.badge-warning.mr-2 Warning
span.badge.badge-info.mr-2 Info
span.badge.badge-light.mr-2 Light
span.badge.badge-dark.mr-2 DarkBy 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
<span class="badge badge-red">Red</span>
<span class="badge badge-orange">Orange</span>
<span class="badge badge-yellow">Yellow</span>
<span class="badge badge-green">Green</span>
<span class="badge badge-teal">Teal</span>
<span class="badge badge-cyan">Cyan</span>
<span class="badge badge-blue">Blue</span>
<span class="badge badge-indigo">Indigo</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-pink">Pink</span>span.badge.badge-red Red
span.badge.badge-orange Orange
span.badge.badge-yellow Yellow
span.badge.badge-green Green
span.badge.badge-teal Teal
span.badge.badge-cyan Cyan
span.badge.badge-blue Blue
span.badge.badge-indigo Indigo
span.badge.badge-purple Purple
span.badge.badge-pink PinkThe above non-contextual badge styles are custom made for the SB Admin Pro theme!
Badge Sizing
Example Heading New
Example Heading New
Example Heading New
Example Heading New
Example Heading New
Example Heading New
This is an example paragraph with a badge at the end! New
<h1>Example Heading <span class="badge badge-primary">New</span></h1>
<h2>Example Heading <span class="badge badge-primary">New</span></h2>
<h3>Example Heading <span class="badge badge-primary">New</span></h3>
<h4>Example Heading <span class="badge badge-primary">New</span></h4>
<h5>Example Heading <span class="badge badge-primary">New</span></h5>
<h6>Example Heading <span class="badge badge-primary">New</span></h6>
<p>This is an example paragraph with a badge at the end! <span class="badge badge-primary">New</span></p>
<button class="btn btn-primary">Messages <span class="badge badge-white">5</span></button>
<button class="btn btn-secondary">Notifications <span class="badge badge-white">3</span></button>
<button class="btn btn-warning">Alerts <span class="badge badge-white">7</span></button>h1 Example Heading
span.badge.badge-primary.ml-2 New
h2 Example Heading
span.badge.badge-primary.ml-2 New
h3 Example Heading
span.badge.badge-primary.ml-2 New
h4 Example Heading
span.badge.badge-primary.ml-2 New
h5 Example Heading
span.badge.badge-primary.ml-2 New
h6 Example Heading
span.badge.badge-primary.ml-2 New
p This is an example paragraph with a badge at the end!
span.badge.badge-primary.ml-2 New
button.btn.btn-primary.mr-2 Messages
span.badge.badge-white.ml-2 5
button.btn.btn-secondary.mr-2 Notifications
span.badge.badge-white.ml-2 3
button.btn.btn-warning Alerts
span.badge.badge-white.ml-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.