bootstrap badges with icons

Add any of the below mentioned modifier classes to change the appearance of a badge. Primary Secondary Success Danger Warning Info Light Dark

bootstrap Badges

Badges scale to match the size of the immediate parent element by 
using relative font sizing and em units.
<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>
<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Posted by: Guest on October-23-2020

Source

Using the contextual .badge-* classes on an <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>

Code answers related to "bootstrap badges with icons"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "bootstrap badges with icons"

Code answers related to "bootstrap badges with icons"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us