Badge on Buttons
To use badge on a button use a container
div as
badge-container and then inside the
div place a
button followed by a
span with class name
badge btn-badge. This gives a button with a badge on.
<div class="badge-container">
<button class="btn btn-primary">
Action
<span class="badge btn-badge">8</span>
</button>
</div>
<div class="badge-container">
<button class="btn btn-primary">
Action
<span class="badge badge-pill btn-badge">99+</span>
</button>
</div>
Badge on Icons
To use badge on an icon use a container
div as
badge-container and then inside the
div place a icon followed by a
span with class name
badge icon-badge. This gives an icon with a badge on.
<div class="badge-container">
<i class="fas fa-home"></i>
<span class="badge icon-badge">15</span>
</div>
Badge on Avatars
To use badge on an avatar use a container as
badge-container and then inside the
div place a avatar followed by a
span with class name
badge avatar-badge. This gives an avatar with a badge on.
<figure class="avatar avatar-xl badge-container">
<img src="../../assets/avatar.jpg" alt="..."></img>
<span class="badge avatar-badge"></span>
</figure>
<figure class="avatar avatar-lg badge-container">
<img src="../../assets/avatar.jpg" alt="..."></img>
<span class="badge avatar-badge"></span>
</figure>
<figure class="avatar avatar-md badge-container">
<img src="../../assets/avatar.jpg" alt="..."></img>
<span class="badge avatar-badge"></span>
</figure>
<figure class="avatar avatar-sm badge-container">
<img src="../../assets/avatar.jpg" alt="..."></img>
<span class="badge avatar-badge"></span>
</figure>