Sizes
Use .badge-collapsed-img
class on ul
tag.
<div class="avatar avatar-xl"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-lg"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-sm"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div>
Indicators
Use .avatar-indicators
class on div.avatar
element
<div class="avatar avatar-xl avatar-indicators avatar-offline"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-lg avatar-indicators avatar-online"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-indicators avatar-offline"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-sm avatar-indicators avatar-online"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div>
Shapes
Use .rounded
and .rounded-circle
class to make avatar rounded and circlular respectively.
<div class="avatar avatar-xl"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" /> </div> <div class="avatar avatar-xl"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-lg"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" /> </div> <div class="avatar avatar-lg"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div>
Initials
Use span
with .avatar-title
class to make user name tags.
AG
AG
AG
AG
<div class="avatar avatar-xl"> <span class="avatar-title rounded-circle">AG</span> </div> <div class="avatar avatar-lg"> <span class="avatar-title rounded-circle">AG</span> </div> <div class="avatar"> <span class="avatar-title rounded-circle">AG</span> </div> <div class="avatar avatar-sm"> <span class="avatar-title rounded-circle">AG</span> </div>
Group
Use div
with .avatar--group
class and put div.avatar
inside it.
AG
AG
<div class="avatar--group"> <div class="avatar avatar-md"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-md"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-md"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar avatar-md"> <span class="avatar-title rounded-circle">AG</span> </div> </div>
Animate Y-axis
Use .translateY-axis
class to make animate profile on Y-axis.
AG
<div class="avatar--group"> <div class="avatar translateY-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateY-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateY-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateY-axis"> <span class="avatar-title rounded-circle">AG</span> </div> </div>
Animate X-axis
Use .translateX-axis
class to make animate profile on X-axis.
AG
<div class="avatar--group"> <div class="avatar translateX-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateX-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateX-axis"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" /> </div> <div class="avatar translateX-axis"> <span class="avatar-title rounded-circle">AG</span> </div> </div>
Tooltip
Use Bootstrap Tooltip on img
tag and span.avatar-title
tag
AG
<div class="avatar--group"> <div class="avatar"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle bs-tooltip" data-original-title="Judy Holmes" /> </div> <div class="avatar"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle bs-tooltip" data-original-title="Judy Holmes" /> </div> <div class="avatar"> <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle bs-tooltip" data-original-title="Judy Holmes" /> </div> <div class="avatar"> <span class="avatar-title rounded-circle bs-tooltip" data-original-title="Alan Green">AG</span> </div> </div>
Copyright © 2021 DesignReset, All rights reserved.
Coded with