Badges
Documentation and examples for badges, count and labeling component.
Badge Color
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<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-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Badge Floating
<!--
Note
.position-relative required on parent container
-->
<button type="button" class="btn btn-warning position-relative">
<span class="badge badge-float bg-danger start-0">5</span>
Left
</button>
<button type="button" class="btn btn-warning position-relative">
<span class="badge badge-float bg-danger end-0">5</span>
Right
</button>
<!-- rounded-pill badge -->
<button type="button" class="btn btn-warning position-relative">
<span class="badge badge-float bg-danger rounded-pill start-0">5</span>
Left
</button>
<!-- rounded-pill badge -->
<button type="button" class="btn btn-warning position-relative">
<span class="badge badge-float bg-danger rounded-pill end-0">5</span>
Right
</button>
<button type="button" class="btn btn-icon btn-light rounded-circle position-relative">
<i class="badge badge-float bg-secondary rounded-pill start-0">5</i>
<svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.832 440.832">
<path fill="currentColor" d="M381.44,265.728V161.792C381.44,72.192,309.248,0,219.648,0S58.368,72.192,58.368,161.792v103.936l-41.984,82.944h408.064L381.44,265.728z"></path>
<path fill="currentColor" d="M151.552,372.736c0,37.376,30.72,68.096,68.096,68.096c37.376,0,68.096-30.72,68.096-68.096H151.552z"></path>
</svg>
</button>
<button type="button" class="btn btn-icon btn-light rounded-circle position-relative">
<i class="badge badge-float bg-success rounded-pill end-0">5</i>
<svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.832 440.832">
<path fill="currentColor" d="M381.44,265.728V161.792C381.44,72.192,309.248,0,219.648,0S58.368,72.192,58.368,161.792v103.936l-41.984,82.944h408.064L381.44,265.728z"></path>
<path fill="currentColor" d="M151.552,372.736c0,37.376,30.72,68.096,68.096,68.096c37.376,0,68.096-30.72,68.096-68.096H151.552z"></path>
</svg>
</button>
Badge Examples
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<button type="button" class="btn btn-primary">
<span class="badge bg-white text-dark">4</span>
<span>Before</span>
</button>
<button type="button" class="btn btn-primary">
<span>After</span>
<span class="badge bg-white text-dark">4</span>
</button>
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>