Avatars
Sizes
You can change the size of avatar using .img- * (70/80/90/100) class.
<!--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/avtar/3.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
</div>Status Indicator
Using .status-* (online/offline/dnd) class you can set the 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/user/1.jpg" alt="#">
<div class="status status-online"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
<div class="status status-dnd"></div>
</div>
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
<div class="status status-offline"></div>
</div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
<div class="status status-online"></div>
</div>Shapes
Using the.b-r-* (8/30/35/25) class you can set the shapes of avatar.
<!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). -->
<div class="avatar">
<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
</div>Ratio
Give the shape to avatar using .ratio and img-* (50/70/80/90/100) class.
<!-- You can use b-r-* class through the set status (100/90/80/70/50). -->
<div class="avatars">
<div class="avatar ratio">
<img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#">
</div>Grouping
You can set the group of avatars like .img-* (40/50/60/80/100) and .b-r-* (8/30/35).
<!-- 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/avtar/4.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
</li>
<li class="d-inline-block">
</li><img class="img-50 b-r-35" src="../assets/images/avtar/3.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/avtar/16.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-60 rounded-circle" src="../assets/images/avtar/16.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/user/3.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt="">
</li>
</ul>