Default

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Button with Badge

<button class="btn btn-outline btn-primary btn-badge"><span class="badge badge-primary">06</span>Messages</button>
<button class="btn btn-raised btn-primary btn-badge"><span class="badge badge-white">06</span>Messages</button>

<button class="btn btn-secondary btn-icon btn-badge">
  <span class="badge badge-danger">3</span>
  <i class="material-icons">notifications</i>
</button>

<button class="btn btn-raised btn-primary btn-icon btn-badge">
  <span class="badge badge-warning">3</span>
  <i class="material-icons">notifications</i>
</button>

Badge with Avatar

<span class="badge badge-avatar-primary">
  <img class="avatar-xs rounded-circle mr-1" src="assets/images/faces/1.jpg">
  <label class="m-0">Timothy Clarkson</label>
</span>

<span class="badge badge-avatar-secondary">
  <img class="avatar-xs rounded-circle mr-1" src="assets/images/faces/2.jpg">
  <label class="m-0">Jhon </label>
</span>

<span class="badge badge-avatar-success">
  <img class="avatar-xs rounded-circle mr-1" src="assets/images/faces/3.jpg">
  <label class="m-0">Mirage </label>
</span>

<span class="badge badge-avatar-danger">
  <img class="avatar-xs rounded-circle mr-1" src="assets/images/faces/4.jpg">
  <label class="m-0">Banglore </label>
</span>

Links

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Rounded Variations

<span class="badge badge-rounded badge-xxs badge-primary">Primary</span>
<span class="badge badge-rounded badge-xs badge-secondary">Secondary</span>
<span class="badge badge-rounded badge-sm badge-success">Success</span>
<span class="badge badge-rounded badge-danger">Danger</span>
<span class="badge badge-rounded badge-warning">Warning</span>
<span class="badge badge-rounded badge-info">Info</span>
<span class="badge badge-rounded badge-light">Light</span>
<span class="badge badge-rounded badge-dark">Dark</span>

Circle Variations

<span class="badge rounded-circle badge-primary badge-xxs">P</span>
<span class="badge rounded-circle badge-secondary badge-xs">S</span>
<span class="badge rounded-circle badge-success badge-sm">D</span>
<span class="badge rounded-circle badge-danger">E</span>
<span class="badge rounded-circle badge-warning">W</span>
<span class="badge rounded-circle badge-info">I</span>
<span class="badge rounded-circle badge-light">L</span>
<span class="badge rounded-circle badge-dark">D</span>

Square Variations

<span class="badge badge-primary badge-rectangle badge-xxs">P</span>
<span class="badge badge-secondary badge-rectangle badge-xs">S</span>
<span class="badge badge-success badge-rectangle badge-sm">D</span>
<span class="badge badge-danger badge-rectangle">E</span>
<span class="badge badge-warning badge-rectangle">W</span>
<span class="badge badge-info badge-rectangle">I</span>
<span class="badge badge-light badge-rectangle">L</span>
<span class="badge badge-dark badge-rectangle">D</span>

Opacity Variations

<span class="badge badge-opacity badge-rectangle badge-primary badge-xxs">
<i class="material-icons">card_travel</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-secondary badge-xs">
<i class="material-icons">all_inbox</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-success badge-sm">
<i class="material-icons">add_shopping_cart</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-danger mr-sm">
<i class="material-icons">error_outline</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-warning mr-sm">
<i class="material-icons">view_headline</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-info mr-sm">
<i class="material-icons">report_problem</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-light badge-lg mr-sm">
<i class="material-icons">laptop_chromebook</i>
</span>

<span class="badge badge-opacity badge-rectangle badge-dark badge-xl mr-sm">
<i class="material-icons">games</i>
</span>

Opacity with Text Variations

<span class="badge badge-opacity badge-rounded badge-primary badge-xxs mr-sm">
<i class="material-icons">card_travel</i> 5 new jobs
</span>
<span class="badge badge-opacity badge-rounded badge-secondary badge-xs mr-sm">
<i class="material-icons">all_inbox</i> 5 new message
</span>
<span class="badge badge-opacity badge-rounded badge-success badge-sm mr-sm">
<i class="material-icons">add_shopping_cart</i> 10 items added
</span>
<span class="badge badge-opacity badge-rounded badge-danger mr-sm">
<i class="material-icons">error_outline</i> 8 server errors
</span>
<span class="badge badge-opacity badge-danger mr-sm">
<i class="material-icons">error_outline</i> 8 server errors
</span>

Badge Brand

<span class="badge badge-brand">
<img class="" src="assets/images/payment-card/master-card.png">
</span>

<span class="badge badge-brand">
<img class="" src="assets/images/payment-card/paypal.png">
</span>