Bootstrap badge color

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

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

Bootstrap badge

<button type="button" class="btn btn-primary position-relative">
  Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
   </span>
</button>

Similar codes

-1 vote168 views1 answer
Responsiveness in bootstrap
CSS Bootstrap
0 vote209 views1 answer
Navbar bootstrap display items horizontally
CSS Bootstrap
0 vote130 views1 answer
Import button react-bootstrap
Javascript Bootstrap
3 votes205 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS Bootstrap
22 votes200 views2 answers
React bootstrap carousal not working
CSS Bootstrap
2 votes195 views2 answers
Remove the glow in bootstrap input
CSS Bootstrap
4 votes203 views4 answers
Bootstrap modal popup disable click outside
Javascript Bootstrap
45 votes211 views6 answers
Adding bootstrap to angular
Javascript Bootstrap
20 votes231 views2 answers
Bootstrap screen sizes
CSS Bootstrap
145 votes210 views6 answers
Add bootstrap to react
CSS Bootstrap