Badges
eCommerce badges
Badges components dedicated to building eCommerce projects.
Basic example
Discount on spring products Sale
Discount on spring products Sale
Discount on spring products Sale
Discount on spring products Sale
Discount on spring products Sale
Discount on spring products Sale
<h1>Discount on spring products <span class="badge badge-primary">Sale</span></h1>
<h2>Discount on spring products <span class="badge badge-primary">Sale</span></h2>
<h3>Discount on spring products <span class="badge badge-primary">Sale</span></h3>
<h4>Discount on spring products <span class="badge badge-primary">Sale</span></h4>
<h5>Discount on spring products <span class="badge badge-primary">Sale</span></h5>
<h6>Discount on spring products <span class="badge badge-primary">Sale</span></h6>
Contextual variations
<span class="badge badge-default">Sale</span>
<span class="badge badge-primary">Sale</span>
<span class="badge badge-secondary">Sale</span>
<span class="badge badge-success">Sale</span>
<span class="badge badge-danger">Sale</span>
<span class="badge badge-warning">Sale</span>
<span class="badge badge-info">Sale</span>
<span class="badge badge-light">Sale</span>
<span class="badge badge-dark">Sale</span>
Pill badges
<span class="badge badge-pill badge-default">Sale</span>
<span class="badge badge-pill badge-primary">Sale</span>
<span class="badge badge-pill badge-secondary">Sale</span>
<span class="badge badge-pill badge-success">Sale</span>
<span class="badge badge-pill badge-danger">Sale</span>
<span class="badge badge-pill badge-warning">Sale</span>
<span class="badge badge-pill badge-info">Sale</span>
<span class="badge badge-pill badge-light">Sale</span>
<span class="badge badge-pill badge-dark">Sale</span>
Badges with links
<a href="#!" class="badge badge-default">Sale</a>
<a href="#!" class="badge badge-primary">Sale</a>
<a href="#!" class="badge badge-secondary">Sale</a>
<a href="#!" class="badge badge-success">Sale</a>
<a href="#!" class="badge badge-danger">Sale</a>
<a href="#!" class="badge badge-warning">Sale</a>
<a href="#!" class="badge badge-info">Sale</a>
<a href="#!" class="badge badge-light">Sale</a>
<a href="#!" class="badge badge-dark">Sale</a>
Notifications
3
5 Notification
Message
<a type="button" role="button" class="btn-floating btn-light">
<i class="fas fa-bell"></i>
</a>
<span class="counter counter-floating counter-md">3</span>
<a type="button" role="button" class="btn-floating btn-sm btn-primary">
<i class="fas fa-user"></i>
</a>
<span class="counter counter-floating counter-sm">3</span>
<a type="button" role="button" class="btn-floating btn-sm btn-light">
<i class="fas fa-user"></i>
</a>
<span class="counter counter-floating counter-sm">5</span>
<span class="ml-n1">Notification</span>
<a class="fb-ic ml-1 mr-3" role="button"><i class="fas fa-envelope fa-lg text-primary"></i></a>
<span class="counter counter-floating counter-lg-icon">1</span>
<span class="ml-n1">Message</span>
Questions or feedback?
Let us know