Badge
Badges are used to add any additional information to any content.
use .badge class with a contextual
class (like .badge-primary
.badge-warning
.badge-danger
.badge-default ) within
<span> element to create badges.
Badge on Icons
Add .badge class to a
<span> and place it inside the same
container or <div> as the Icon to
apply it. (note: the container should be positioned relative or
absolute.)
chat
6
folder
6
fitness_center
6
subscriptions
6
<div class="icon-containter pos-rel">
<i class="material-icons"/>
<span class="badge badge-success" > </span>
</div>
<div class="icon-containter pos-rel">
<i class="material-icons"/>
<span class="badge badge-success" > </span>
</div>
<div class="icon-containter pos-rel">
<i class="material-icons"/>
<span class="badge badge-success" > </span>
</div>
<div class="icon-containter pos-rel">
<i class="material-icons"/>
<span class="badge badge-success" > </span>
</div>Badge on Avatars
Add .badge class to a
<span> and place it inside the same
container or <div> as the avatar to
apply it. (note: the container should be positioned relative or
absolute.)
<div class="img-containter pos-rel">
<img
src="https://avatar-15"
class="avatar-sq avatar-lg"
alt="image"
/>
<span class="badge badge-success"> </span>
</div>
<div class="img-containter pos-rel">
<img
src="https://avatar-15"
class="avatar-sq avatar-lg"
alt="image"
/>
<span class="badge badge-warning"> </span>
</div>
<div class="img-containter pos-rel">
<img
src="https://avatar-15"
class="avatar-sq avatar-lg"
alt="image"
/>
<span class="badge badge-primary"> </span>
</div>
<div class="img-containter pos-rel">
<img
src="https://avatar-15"
class="avatar-sq avatar-lg"
alt="image"
/>
<span class="badge badge-danger"> </span>
</div>