Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

 

Example heading New

 

 

Example heading New

 

 

Example heading New

 

 

Example heading New

 

 

Example heading New

 

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<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>
Contextual variations

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Primary Secondary Success Danger Warning Info Light Dark