Edit these docs

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

Sale Sale Sale Sale Sale Sale Sale Sale Sale 


          <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

Sale Sale Sale Sale Sale Sale Sale Sale Sale 


          <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>

Badge inside the button 



          <button type="button" class="btn btn-primary">
            Notifications <span class="badge badge-danger ml-2">5</span>
          </button>

Notifications

3

3

5 Notification

1 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>