Badge

Circles

.badge-circle

1 2 3 4 5 6
<span class="badge badge-default badge-circle">
  1</span>

<span class="badge badge-primary badge-circle">2</span>

<span class="badge badge-info badge-circle">3</span>

<span class="badge badge-success badge-circle">4</span>

<span class="badge badge-warning badge-circle">5</span>

<span class="badge badge-danger badge-circle">6</span>
			  

Pills

.badge-pill

1 2 3 4 5 6
<span class="badge badge-default badge-pill">
  1</span>

<span class="badge badge-primary badge-pill">2</span>

<span class="badge badge-info badge-pill">3</span>

<span class="badge badge-success badge-pill">4</span>

<span class="badge badge-warning badge-pill">5</span>

<span class="badge badge-danger badge-pill">6</span>
			  

Size

.badge--size-sm .badge--size-md .badge--size-xl

1 2 3
<span class="badge badge-default badge-circle badge--size-sm">
  1</span>

<span class="badge badge-primary badge-circle badge--size-md">2</span>

<span class="badge badge-info badge-circle badge--size-xl">3</span>
			  

Styles

.badge-default .badge-primary .badge-secondary .badge-success .badge-info .badge-warning .badge-danger

Default Primary Success Info Warning Danger
1 2 3 4 5 6
<span class="badge badge-default">
  Default</span>

<span class="badge badge-primary">Primary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-danger">Danger</span>

<br>
<span class="badge badge-default badge-pill">1</span>

<span class="badge badge-primary badge-pill">2</span>

<span class="badge badge-info badge-pill">3</span>

<span class="badge badge-success badge-pill">4</span>

<span class="badge badge-warning badge-pill">5</span>

<span class="badge badge-danger badge-pill">6</span>