Badge

Documentation and examples for basic style on badge element.

Variables

Name Type Value
$badge-color color $text-color
$badge-font-size size 80%
$badge-padding padding .125rem .375rem
$badge-border-radius radius $radius
$badge-pill-border-radius radius $radius-rounded
$badge-background color $gray-400
$badge-link-color-hover color $badge-color

Simple badge

Badge
<span class="badge">Badge</span>

Examples

Example heading New

<!-- Inside a heading -->
<h4>Example heading <span class="badge">New</span></h4>

<!-- Inside a button -->
<button>Notifications <span class="badge">5</span></button>

Pill badge

Badge
<span class="badge-pill">Badge</span>
<!-- Link badge -->
<a href="#" class="badge">Badge</a>
<!-- Link badge pill -->
<a href="#" class="badge-pill">Badge</a>