/Html/Bootstrap Badges Contextual variations

Bootstrap Badges Contextual variations

Add any of the below mentioned modifier classes to change the appearance 
of a badge.
<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>

Source: getbootstrap.com

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>

Source: getbootstrap.com

Similar codes

44 votes265 views6 answers
Html bold
Html
6 votes230 views2 answers
Adding image in header html
Html
34 votes235 views2 answers
Dont show suggestions in input hs
Html
2 votes258 views1 answer
M3u8 ffmpeg download
Html
19 votes240 views3 answers
Bootstrap responsive navigation menu
Html
0 vote242 views1 answer
Wicked pdf page break
Html
2 votes248 views1 answer
Td colspan all
Html
0 vote235 views1 answer
<pre>; html tag that preserves spacing
Html
1 vote240 views1 answer
Js cannot copy entire object
Html
2 votes268 views3 answers
Cdn react
Html