Sizing
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-36"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-42"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-48"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-64"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-80"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-100"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/200/avatar01.png" class="avatar avatar-120"/>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/200/avatar01.png" class="avatar avatar-150"/>
</div>Alert Sign
Add a shadow sign to show user alert.
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-36"/>
<span class="user-alert-sign bg-global pulse-over-danger"></span>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-42"/>
<span class="user-alert-sign bg-global pulse-over-danger"></span>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-48"/>
<span class="user-alert-sign bg-global pulse-over-danger"></span>
</div>
<div class="user-avatar">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-64"/>
<span class="user-alert-sign bg-global pulse-over-danger"></span>
</div>Status & Colored Sign
Add colored sign or an online, offline status indicator to show user's availability.
<div class="user-avatar avatar-has-status">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-36"/>
<span class="user-status-sign bg-success"></span>
</div>
<div class="user-avatar avatar-has-status">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-42"/>
<span class="user-status-sign bg-success"></span>
</div>
<div class="user-avatar avatar-has-status">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-48"/>
<span class="user-status-sign bg-light-blue"></span>
</div>
<div class="user-avatar avatar-has-status">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-64"/>
<span class="user-status-sign bg-success"></span>
</div>
<div class="user-avatar avatar-has-status">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-64"/>
<span class="user-status-sign bg-primary"></span>
</div>Circle progress
Add an animated border around the avatar to show Percentage
data-size* : image.size + 2*thickness (px)
data-value : Percentage (%)
data-thickness : border thickness (px)
<div class="user-progress" data-value="0.6" data-size="40" data-thickness="2">
<div class="chart-inner">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-36"/>
</div>
</div>Shadow pulse
Add an pulse animated shadow around the avatar
<div class="user-avatar avatar-has-shadow">
<img src="../html/assets/images/avatars/avatar01.png" class="avatar avatar-36"/>
</div>