Badge with headings

Example heading New

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Badge Button

<button type="button" class="btn btn-primary">
  Unread <span class="badge badge-light">15</span>
</button>

Badge Basic

Primary Secondary Success Danger Warning Info Light 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-light">Light</span>
<span class="badge badge-dark">Dark</span>

Badge Sizes

Default Medium Large

<span class="badge  badge-primary">Default</span>
<span class="badge badge-md badge-primary">Medium</span>
<span class="badge badge-lg badge-primary">Large</span>

Badge Links

Primary Secondary Success Danger Warning Info Light Dark

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

Badge Pill

Primary Secondary Success Danger Warning Info Light Dark

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

Badge Circle

CD 12 CD 34 EF 56 GH 78

<span class="badge badge-circle badge-primary">CD</span>
<span class="badge badge-circle badge-secondary">12</span>
<span class="badge badge-circle badge-success">CD</span>
<span class="badge badge-circle badge-danger">34</span>
<span class="badge badge-circle badge-warning">EF</span>
<span class="badge badge-circle badge-info">56</span>
<span class="badge badge-circle badge-light">GH</span>
<span class="badge badge-circle badge-dark">78</span>

Badge Square

Primary Secondary Success Danger Warning Info Light Dark

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

Base Theme

Components

Section

MegaMenu heading

Badge

Badge with headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Badge Button

Badge Basic

Badge Sizes

Badge Links

Badge Pill

Badge Circle

Badge Square