Loader

Badges

Default Primary Success Danger Info Warning
<span class="badge badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-primary  mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-success  mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-danger  mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-info  mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-warning  mr-1 mb-1 mt-1">Warning</span>

gradient Badges

Default Primary Success Danger Info Warning
<span class="badge badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-primary-gradient  mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-success-gradient  mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-danger-gradient  mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-info-gradient  mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-warning-gradient  mr-1 mb-1 mt-1">Warning</span>

Pill Badges

Default Primary Success Danger Info Warning
<span class="badge badge-pill badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-pill badge-primary mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-pill badge-success mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-pill badge-danger mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-pill badge-info mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-pill badge-warning mr-1 mb-1 mt-1">Warning</span>

gradient Pill Badges

Default Primary Success Danger Info Warning
<span class="badge badge-pill badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-pill badge-primary-gradient mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-pill badge-success-gradient mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-pill badge-danger-gradient mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-pill badge-info-gradient mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-pill badge-warning-gradient mr-1 mb-1 mt-1">Warning</span>

Buttons with Badges

<button type="button" class="btn btn-primary mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-white">2</span>
</button>
<button type="button" class="btn btn-secondary  mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-dark">2</span>
</button>
<button type="button" class="btn btn-success  mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-info">2</span>
</button>
<button type="button" class="btn btn-info  mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-danger">2</span>
</button>
<button type="button" class="btn btn-warning text-dark mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-primary">2</span>
</button>
<button type="button" class="btn btn-danger  mt-1 mb-1 mr-3">
	<span>Notifications</span>
	<span class="badge badge-info">2</span>
</button>

Simple Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New
Heading 06 New
<h1>Heading 01 <span class="badge badge-default">New</span></h1>
<h2>Heading 02 <span class="badge badge-default">New</span></h2>
<h3>Heading 03 <span class="badge badge-default">New</span></h3>
<h4>Heading 04 <span class="badge badge-default">New</span></h4>
<h5>Heading 05 <span class="badge badge-default">New</span></h5>
<h6>Heading 06 <span class="badge badge-default">New</span></h6>

Colored Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New
Heading 06 New
<h1 class="text-primary">Heading 01 <span class="badge badge-primary">New</span></h1>
<h2  class="text-red">Heading 02 <span class="badge badge-danger">New</span></h2>
<h3  class="text-yellow">Heading 03 <span class="badge badge-warning">New</span></h3>
<h4  class="text-green">Heading 04 <span class="badge badge-success">New</span></h4>
<h5  class="text-info">Heading 05 <span class="badge badge-info">New</span></h5>
<h6  class="text-secondary">Heading 06 <span class="badge badge-secondary">New</span></h6>

Contextual variations

Default Primary Success Info Warning Danger
<span class="badge badge-default mt-2">Default</span>
<span class="badge badge-primary mt-2">Primary</span>
<span class="badge badge-success mt-2">Success</span>
<span class="badge badge-info mt-2">Info</span>
<span class="badge badge-warning mt-2">Warning</span>
<span class="badge badge-danger mt-2">Danger</span>

Pill Badges

Default Primary Success Info Warning Danger
<span class="badge badge-pill badge-default mt-2">Default</span>
<span class="badge badge-pill badge-primary mt-2">Primary</span>
<span class="badge badge-pill badge-success mt-2">Success</span>
<span class="badge badge-pill badge-info mt-2">Info</span>
<span class="badge badge-pill badge-warning mt-2">Warning</span>
<span class="badge badge-pill badge-danger mt-2">Danger</span>