Avatars
-
3
Notifications
-
Emay Walter liked your post
10 minutes ago -
Allie Gratershared your post
5 hours ago -
Colin Sikcommented on your post
yesterday - Check all
-
-
2
Jane Cooper
active
-
Hello.how are you?
-
Hi, i'm fine.what about you?
-
I am facing js issue can you help me?
-
Sure, i will help you.
-
-
-
2
-
Wade Warren
UI DesignerSizes
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/11.jpg" alt="user profile">
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/9.jpg" alt="user profile">
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/avtar/5.jpg" alt="user profile">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/avtar/6.jpg" alt="user profile">
</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/avtar/1.jpg" alt="user profile">
<div class="status bg-success"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/2.jpg" alt="user profile">
<div class="status bg-warning"></div>
</div>
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/3.jpg" alt="user profile">
<div class="status bg-danger"></div>
</div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/4.jpg" alt="user profile">
<div class="status bg-success"></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/8.jpg" alt="user profile">
</div>
<div class="avatar">
<img class= "img-90 b-r-30" src="../assets/images/avtar/5.jpg" alt="user profile">
</div>
<div class="avatar">
<img class= "img-80 b-r-35" src="../assets/images/avtar/11.jpg" alt="user profile">
</div>
<div class="avatar">
<img class= "img-70 rounded-circle" src="../assets/images/avtar/4.jpg" alt="user profile">
</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/9.jpg" alt="user-profile">
</div>
<div class="avatar ratio">
<img class= "b-r-8 img-90" src="../assets/images/avtar/1.jpg" alt="user-profile">
</div>
<div class="avatar ratio">
<img class= "b-r-8 img-80" src="../assets/images/user/3.jpg" alt="user-profile">
</div>
<div class="avatar ratio">
<img class= "b-r-8 img-70" src="../assets/images/avtar/6.jpg" alt="user-profile">
</div>
<div class="avatar ratio">
<img class= "b-r-8 img-50" src="../assets/images/avtar/3.jpg" alt="user-profile">
</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/10.jpg" alt="user profile">
</li>
<li class="d-inline-block">
<img class= "img-80 b-r-30" src="../assets/images/avtar/4.jpg" alt="user profile">
</li>
<li class="d-inline-block">
</li><img class= "img-50 b-r-35" src="../assets/images/avtar/8.jpg" alt="user profile">
</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/11.jpg" alt="user profile">
</li>
<li class="d-inline-block">
<img class= "b-r-8 img-80" src="../assets/images/avtar/9.jpg" alt="user profile">
</li>
<li class="d-inline-block">
<img class= "img-60 rounded-circle" src="../assets/images/avtar/4.jpg" alt="user profile">
</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/1.jpg" alt="user profile">
</li>
<li class="d-inline-block">
<img class= "img-40 rounded-circle" src="../assets/images/user/2.jpg" alt="user profile">
</li>
<li class="d-inline-block">
<img class= "img-40 rounded-circle" src="../assets/images/user/3.jpg" alt="user profile">
</li>
</ul>