badges

Butter Cake badges have fixed font size of 16px, use .badge-lg for large badge and use .badge-sm for 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">
    <i class="fa fa-twitter"></i>
</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>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content