Avatar

Avatar Sizing

Pair the avatar class with .avatar-* and add sizing suffix to the latter like *-xxs, *-xs, *-sm, *-lg, *-xl, *-xl

HTML Code for this Element

<div class="avatar avatar-xxs">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>
<div class="avatar avatar-xs">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>
<div class="avatar avatar-md">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>
<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>
<div class="avatar avatar-xl">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>

Avatar Shape

Add class rounded-pill or rounded-5 to the img to give the avatar a circle shape. Additionally any rounded-* class will add a respective border radius.

HTML Code for this Element

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-1" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-2" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-3" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-4" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-5" alt="">
</div>

<div class="avatar avatar-lg">
	<img src="assets/img/avatars/Memoji/colored-bg/Memoji-01.png" class="rounded-pill" alt="">
</div>

Avatar Stack

Group a bunch of avatars closer. Avatar stack allows sizing as well.

HTML Code for this Element

<div class="avatar-stack mb-4">
	<div class="avatar avatar-sm">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-13.png" class="rounded-pill" alt="">
	</div>
	<div class="avatar avatar-sm">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-35.png" class="rounded-pill" alt="">
	</div>
	<div class="avatar avatar-sm">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-04.png" class="rounded-pill" alt="">
	</div>
</div>
<div class="avatar-stack mb-4">
	<div class="avatar avatar-md">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-10.png" class="rounded-pill" alt="">
	</div>
	<div class="avatar avatar-md">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-25.png" class="rounded-pill" alt="">
	</div>
	<div class="avatar avatar-md">
		<img src="assets/img/avatars/Memoji/colored-bg/Memoji-46.png" class="rounded-pill" alt="">
	</div>
</div>