×

Avatars

An avatar is an icon or figure representing a person in a profile section or chat screens etc.
Avatars are available in 4 sizes xs sm md and lg.

Examples

Image Avatars

avatar-img
avatar-img
avatar-img
avatar-img 
                   
<div class="avatar avatar-xs">
    <img src="components/images/avatar-img.jpeg" alt="avatar-img" class="img-round img-responsive" />
</div>

<div class="avatar avatar-sm">
    <img src="components/images/avatar-img.jpeg" alt="avatar-img" class="img-round img-responsive" />
</div>

<div class="avatar avatar-md">
    <img src="components/images/avatar-img.jpeg" alt="avatar-img" class="img-round img-responsive" />
</div>

<div class="avatar avatar-lg">
    <img src="components/images/avatar-img.jpeg" alt="avatar-img" class="img-round img-responsive" />
</div>

Text Avatars

VB
VB
VB
VB
                   
<div class="avatar avatar-xs avatar-text bg-blue-500 text-white">VB</div>
<div class="avatar avatar-sm avatar-text bg-pink-500 text-white">VB</div>
<div class="avatar avatar-md avatar-text bg-purple-500 text-white">VB</div>
<div class="avatar avatar-lg avatar-text bg-teal-500 text-white">VB</div>
Alert Badge