Badge
Easily create nice looking notification badges.
Butter Cake badges have fixed font size of 16px, use.badge-lgfor large badge and use.badge-smfor small badge.
Normal Badges
Badge
primary
secondary
success
warning
danger
dark
<span class="badge">Badge</span>
<span class="badge primary">primary</span>
<span class="badge secondary">secondary</span>
<span class="badge success">success</span>
<span class="badge warning">warning</span>
<span class="badge danger">danger</span>
<span class="badge dark">dark</span>
Small Badges
Badge
primary
secondary
success
warning
danger
dark
<span class="badge badge-sm">Badge</span>
<span class="badge badge-sm primary">primary</span>
<span class="badge badge-sm secondary">secondary</span>
<span class="badge badge-sm success">success</span>
<span class="badge badge-sm warning">warning</span>
<span class="badge badge-sm danger">danger</span>
<span class="badge badge-sm dark">dark</span>
Large Badges
Badge
primary
secondary
success
warning
danger
dark
<span class="badge badge-lg">Badge</span>
<span class="badge badge-lg primary">primary</span>
<span class="badge badge-lg secondary">secondary</span>
<span class="badge badge-lg success">success</span>
<span class="badge badge-lg warning">warning</span>
<span class="badge badge-lg danger">danger</span>
<span class="badge badge-lg dark">dark</span>
Rounded Badges
Badge
primary
secondary
success
warning
danger
dark
<span class="badge rounded">Badge</span>
<span class="badge rounded primary">primary</span>
<span class="badge rounded secondary">secondary</span>
<span class="badge rounded success">success</span>
<span class="badge rounded warning">warning</span>
<span class="badge rounded danger">danger</span>
<span class="badge rounded dark">dark</span>
Badge Icons
Simple add .badge-icon class to the badge
available size { Normal size | badge-sm | badge-lg }
<!-- SMALL -->
<a href="#" class="badge badge-icon badge-sm primary">
<span>10</span>
</a>
<!-- REGULAR -->
<a href="#" class="badge badge-icon info">
<i class="fa fa-facebook"></i>
</a>
<!-- LARGE -->
<a href="#" class="badge badge-icon badge-lg secondary">
<i class="fa fa-instagram"></i>
</a>
Contact us
Report Bug
Request Feature
Submit Work