Badge

Documentation and examples for badges, our small count and labeling component.

Examples

Text

Primary Secondary Success Danger Warning Info Dark 
<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-dark">
    Dark
</span>

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Dark

Icon

Primary Secondary Success Danger Warning Info Dark 
<span class="badge badge-primary">
    <i data-feather="check"></i>Primary
</span>

<span class="badge badge-secondary">
    <i data-feather="check"></i>Secondary
</span>

<span class="badge badge-success">
    <i data-feather="check"></i>Success
</span>

<span class="badge badge-danger">
    <i data-feather="check"></i>Danger
</span>

<span class="badge badge-warning">
    <i data-feather="check"></i>Warning
</span>

<span class="badge badge-info">
    <i data-feather="check"></i>Info
</span>

<span class="badge badge-dark">
    <i data-feather="check"></i>Dark
</span>

Colors

Soft

Soft primary Soft secondary Soft success Soft danger Soft warning Soft info Soft dark 
<span class="badge badge-soft-primary">
    Soft primary
</span>

<span class="badge badge-soft-secondary">
    Soft secondary
</span>

<span class="badge badge-soft-success">
    Soft success
</span>

<span class="badge badge-soft-danger">
    Soft danger
</span>

<span class="badge badge-soft-warning">
    Soft warning
</span>

<span class="badge badge-soft-info">
    Soft info
</span>

<span class="badge badge-soft-dark">
    Soft dark
</span>

Shapes

Pills

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

Circle

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

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

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

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

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

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

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

Sizing

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

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

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

Dots

Primary Secondary Success Danger Warning Info Dark 
<span class="badge badge-dot">
    <i class="bg-primary"></i>Primary
</span>

<span class="badge badge-dot">
    <i class="bg-secondary"></i>Secondary
</span>

<span class="badge badge-dot">
    <i class="bg-success"></i>Success
</span>

<span class="badge badge-dot">
    <i class="bg-danger"></i>Danger
</span>

<span class="badge badge-dot">
    <i class="bg-warning"></i>Warning
</span>

<span class="badge badge-dot">
    <i class="bg-info"></i>Info
</span>

<span class="badge badge-dot">
    <i class="bg-dark"></i>Dark
</span>
Warning Warning Warning 
<span class="badge badge-dot">
    <i class="bg-warning"></i>Warning
</span>

<span class="badge badge-dot badge-md">
    <i class="bg-warning"></i>Warning
</span>

<span class="badge badge-dot badge-lg">
    <i class="bg-warning"></i>Warning
</span>

Buttons

Badges can be used as part of links or buttons to provide a counter.

Default

<button type="button" class="btn btn-primary pr-3">
	<span>Unread messages</span>
  	
<span class="badge badge-warning">
    23
</span>
</button>

Floating

Badges can be used as part of links or buttons to provide a counter.

<button type="button" class="btn btn-primary">
	<span>Purchase now</span>
  	
<span class="badge badge-danger badge-pill badge-floating border-white">
    $23
</span>
</button>
<button type="button" class="btn btn-success">
	<span>Notifications</span>
  	
<span class="badge badge-danger badge-circle badge-md badge-floating border-white">
    7
</span>
</button>
Summary