badges

Butter Cake badges have fixed font size of 16px, use .badge-lg for large badge and use .badge-sm for small badge.

Examples



Normal Badges

Badge primary secondary success warning danger dark light 
<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>
<span class="badge light">light</span>


Small Badges

Badge primary secondary success warning danger dark light 
<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>
<span class="badge badge-sm light">light</span>


Large Badges

Badge primary secondary success warning danger dark light 
<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>
<span class="badge badge-lg light">light</span>


Rounded Badges

Badge primary secondary success warning danger dark light 
<span class="badge rounded badge-lg">Badge</span>
<span class="badge rounded badge-lg primary">primary</span>
<span class="badge rounded badge-lg secondary">secondary</span>
<span class="badge rounded badge-lg success">success</span>
<span class="badge rounded badge-lg warning">warning</span>
<span class="badge rounded badge-lg danger">danger</span>
<span class="badge rounded badge-lg dark">dark</span>
<span class="badge rounded badge-lg light">light</span>


1 1 1 1 1 1 1 1 
<span class="badge rounded badge-sm">1</span>
<span class="badge rounded badge-sm primary">1</span>
<span class="badge rounded badge-sm secondary">1</span>
<span class="badge rounded badge-sm success">1</span>
<span class="badge rounded badge-sm warning">1</span>
<span class="badge rounded badge-sm danger">1</span>
<span class="badge rounded badge-sm dark">1</span>
<span class="badge rounded badge-sm light">1</span>