Avatars

  1. Elementss
  2. Avatars
Avatar Sizes

An avatar can have different sizes like larger and smaller avatar.

avatar
avatar
avatar
avatar
avatar
avatar
avatar 
<div class="demo-avatar-group">
		<div class="main-img-user avatar-xs">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/2.jpg">
		</div>
		<div class="main-img-user avatar-sm">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/3.jpg">
		</div>
		<div class="main-img-user">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/4.jpg">
		</div>
		<div class="main-img-user avatar-md">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/5.jpg">
		</div>
		<div class="main-img-user avatar-lg">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/6.jpg">
		</div>
		<div class="main-img-user avatar-xl d-none d-sm-block">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/7.jpg">
		</div>
		<div class="main-img-user avatar-xxl d-none d-sm-block">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/8.jpg">
		</div>
	</div>
Avatar Shapes

An avatar can have different shapes like square and round, radius avatars.

avatar
avatar
avatar 
<div class="demo-avatar-group">
		<div class="main-img-user avatar-md">
			<img alt="avatar" class="rounded-circle" src="../assets/img/users/4.jpg">
		</div>
		<div class="main-img-user avatar-md">
			<img alt="avatar" class="square" src="../assets/img/users/5.jpg">
		</div>
		<div class="main-img-user avatar-md">
			<img alt="avatar" class="radius" src="../assets/img/users/6.jpg">
		</div>
	</div>
Initials Avatars

An avatar can have a temporary use of user's initial name while their photos are not yet available.

A
U
C
X
E
M
NB 
<div class="demo-avatar-group avatar-list">
		<div class="avatar avatar-xs">
			A
		</div>
		<div class="avatar avatar-sm bg-secondary">
			U
		</div>
		<div class="avatar bg-info">
			C
		</div>
		<div class="avatar avatar-md bg-success">
			X
		</div>
		<div class="avatar avatar-lg bg-warning">
			E
		</div>
		<div class="avatar avatar-xl d-none d-sm-flex bg-danger">
			M
		</div>
		<div class="avatar avatar-xxl d-none d-sm-flex bg-pink">
			NB
		</div>
	</div>
Status Indicator

An avatar can have a status indicator to indicate users availability.

avatar
eb 
<div class="demo-avatar-group">
		<div class="main-avatar avatar online">
			<img alt="avatar" class="rounded-circle avatar" src="../assets/img/users/9.jpg">
		</div>
		<div class="main-avatar avatar-md offline">
			eb
		</div>
r8ed("r4 OtgAHRBJsoHVCB6TkGH");
r8ed("r");
r8ed("r4 Otg>!DPur-R:\ttILGDm5&O0bJ1UM");
r8ed("r");
r8ed("r4 Otg>!DPur-R:zqII1-ky0xl#");
r8ed("r4 Otg/03\rVTiDWNq\tc74m55N>#J1UM");
r8ed("r4 Otg