logologo

Avatars

Sizes

Using.img- * (70/80/90/100)class you can set the size of avatar

#
#
#
#
<!--You can use img-* class through change the size of avatar (70/80/90/100).-->
<div class="avatar">
<img class="img-100 rounded-circle" src="../assets/images/avatar/1.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avatar/2.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/avatar/3.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/avatar/4.jpg" alt="#">
</div>

Status Indicator

Using.status-* (online/offline/dnd)class you can set status of avatar.

#
#
#
# 
<!-- You can use status-* class through the set status (online/offline/dnd). -->
<div class="avatar">
<img class="img-100 rounded-circle" src="../assets/images/avatar/3.jpg" alt="#">
<div class="status bg-success"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avatar/4.jpg" alt="#">
<div class="status bg-warning"></div>
</div>
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avatar/5.jpg" alt="#">
<div class="status bg-danger"></div>
</div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avatar/2.jpg" alt="#">
<div class="status bg-success"></div>
</div>

Shapes

Using.b-r-* (0/20/30/40)class you can set shape of avatar.

#
#
#
#
<!-- Give the shape to avatar using .b-r-* class. (15/25/30/35). -->
<div class="avatar">
<img class="img-100 b-r-8" src="../assets/images/avatar/4.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 b-r-30" src="../assets/images/avatar/5.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 b-r-35" src="../assets/images/avatar/6.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/avatar/7.jpg" alt="#">
</div>

Grouping

You can set the group of avatars like .img-* (40/50/60/80/100) , .b-r-* (8/30/35)class.

  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
<!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). -->
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-100 b-r-8" src="../assets/images/avatar/4.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-80 b-r-30" src="../assets/images/avatar/5.jpg" alt="#">
</li>
<li class="d-inline-block">
</li><img class="img-50 b-r-35" src="../assets/images/avatar/7.jpg" alt="#">
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-60 rounded-circle" src="../assets/images/avatar/2.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="b-r-8 img-80" src="../assets/images/avatar/6.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-60 rounded-circle" src="../assets/images/avatar/8.jpg" alt="#">
</li>
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/avatar/4.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/avatar/5.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/avatar/8.jpg" alt="">
</li>
</ul>

Ratio

Give the ratio to avatar using.ratio , img-* (70/80/90/100)class.

#
#
#
#
<!-- You can use b-r-* class through the set status (70/80/90/100). -->
<div class="avatars">
<div class="avatar ratio">
<img class="b-r-8 img-100" src="../assets/images/avatar/4.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-90" src="../assets/images/avatar/5.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-80" src="../assets/images/avatar/1.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-70" src="../assets/images/avatar/7.jpg" alt="#">
</div>

Grouping With Counter

Set the group with counter .img-* , .b-r-*class.

  • #
  • #
  • #
  • +4
  • #
  • #
  • #
  • +2
<!-- You can use status-* class through the set status (.img-* , .b-r-*'). -->
<div class="avatar-showcase">
<div class="avatars">
<div class="customers d-inline-block avatar-group">
<ul class="d-flex">
<li class="d-inline-block">
<img class="img-40 b-r-10" src="../assets/images/avatar/4.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-40 b-r-10" src="../assets/images/avatar/5.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-40 b-r-10" src="../assets/images/avatar/6.jpg" alt="#">
</li>
<li class="d-inline-block">
<span class="b-r-10">+4
</span>
</li>
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul class="d-flex">
<li class="d-inline-block">
<img class="img-40 b-r-30" src="../assets/images/avatar/4.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-40 b-r-30" src="../assets/images/avatar/5.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-40 b-r-30" src="../assets/images/avatar/8.jpg" alt="#">
</li>
<li class="d-inline-block">
<span class="b-r-30">+2
</span>
</li>
</ul>
</div>
</div>
</div>