Skip to main content

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

 

Badges scale to match the size of their parent element.

<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>

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>

Primary Secondary Success Danger Warning Info Light Dark

 

Use the.badge-pill modifier class to make badges more rounded

<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>

Primary Secondary Success Danger Warning Info Light Dark

 

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

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

What's With All These Cookie Notices?

Wondering why so many websites display these cookie notices? Find out.

Back to top