keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Avatar

Avatar.

The .avatar class provides a flexible and reusable way to display user avatars in various sizes and colors. It supports user initials, icons, or images, making it ideal for profile displays, messaging systems, and dashboards.

Overview

The .avatar class provides a flexible way to display avatars with various sizes and colors. You can use it to display user initials, icons, or images.

  • Use .avatar for a circular avatar container.
  • Apply .avatar-xs, .avatar-sm, .avatar-lg, .avatar-xl for different sizes.
  • Use .avatar-primary, .avatar-warning, .avatar-success, etc., to set background colors.
  • Icons can be added inside the avatar for a customized look.
W
C
R
O
star

Avatar Colors

Avatars support contextual colors to match different themes. Use .avatar-{color} classes to change the background:

W
3
C
O
R
E
U
I
W
3
C
O
R
E
U
I
Class Name Color
.avatar-primary & .text-bg-primary Primary color
.avatar-secondary & .text-bg-secondary Secondary color
.avatar-success & .text-bg-success Success color
.avatar-info & .text-bg-info Info color
.avatar-warning & .text-bg-warning Warning color
.avatar-danger & .text-bg-danger Danger color
.avatar-light & .text-bg-light Light color
.avatar-dark & .text-bg-dark Dark color 
<div class="avatar avatar-primary">W</div>
<div class="avatar avatar-secondary">3</div>
<div class="avatar avatar-success">C</div>
<div class="avatar avatar-info">O</div>
<div class="avatar avatar-warning">R</div>
<div class="avatar avatar-danger">E</div>
<div class="avatar avatar-light">U</div>
<div class="avatar avatar-dark">I</div>


<div class="avatar border-primary text-bg-primary">W</div>
<div class="avatar border-secondary text-bg-secondary">3</div>
<div class="avatar border-success text-bg-success">C</div>
<div class="avatar border-info text-bg-info">O</div>
<div class="avatar border-warning text-bg-warning">R</div>
<div class="avatar border-danger text-bg-danger">E</div>
<div class="avatar border-light text-bg-light">U</div>
<div class="avatar border-dark text-bg-dark">I</div>

Avatar Sizes

Avatars come in multiple sizes for better UI adaptability. Available size classes.

XS
SM
W
LG
XL
Class Size Example
.avatar-xs Extra Small
.avatar-sm Small
.avatar (default) Medium
.avatar-lg Large
.avatar-xl Extra Large 
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-primary">SM</div>
<div class="avatar avatar-primary">W</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-primary">XL</div>

Avatar corner

Sharp corners with rounded-0, perfect circles with rounded-circle.

W
3
C
O
R
E
U
I
W
3
C
O
R
E
U
I
<div class="avatar avatar-primary rounded-circle">W</div>
<div class="avatar avatar-secondary rounded-circle">3</div>
<div class="avatar avatar-success rounded-circle">C</div>
<div class="avatar avatar-info rounded-circle">O</div>
<div class="avatar avatar-warning rounded-circle">R</div>
<div class="avatar avatar-danger rounded-circle">E</div>
<div class="avatar avatar-light rounded-circle">U</div>
<div class="avatar avatar-dark rounded-circle">I</div>

<div class="avatar avatar-primary rounded-0">W</div>
<div class="avatar avatar-secondary rounded-0">3</div>
<div class="avatar avatar-success rounded-0">C</div>
<div class="avatar avatar-info rounded-0">O</div>
<div class="avatar avatar-warning rounded-0">R</div>
<div class="avatar avatar-danger rounded-0">E</div>
<div class="avatar avatar-light rounded-0">U</div>
<div class="avatar avatar-dark rounded-0">I</div>

Avatar Img

you can use avatar with <img>.

image
image
image
image
image
image
image 
<img src="assets/images/avatar/small/avatar1.webp" class="avatar avatar-xs" alt="">
<img src="assets/images/avatar/small/avatar2.webp" class="avatar avatar-xs rounded-circle" alt="">
<img src="assets/images/avatar/small/avatar3.webp" class="avatar avatar-xs rounded-0" alt="">

<img src="assets/images/avatar/small/avatar4.webp" class="avatar avatar-sm" alt="">
<img src="assets/images/avatar/small/avatar5.webp" class="avatar avatar-sm rounded-circle" alt="">
<img src="assets/images/avatar/small/avatar6.webp" class="avatar avatar-sm rounded-0" alt="">

<img src="assets/images/avatar/small/avatar7.webp" class="avatar" alt="">
<img src="assets/images/avatar/small/avatar8.webp" class="avatar rounded-circle" alt="">
<img src="assets/images/avatar/small/avatar9.webp" class="avatar rounded-0" alt="">

<img src="assets/images/avatar/large/avatar10.webp" class="avatar avatar-lg" alt="">
<img src="assets/images/avatar/large/avatar1.webp" class="avatar avatar-lg rounded-circle" alt="">
<img src="assets/images/avatar/large/avatar2.webp" class="avatar avatar-lg rounded-0" alt="">

<img src="assets/images/avatar/large/avatar3.webp" class="avatar avatar-xl" alt="">
<img src="assets/images/avatar/large/avatar4.webp" class="avatar avatar-xl rounded-circle" alt="">
<img src="assets/images/avatar/large/avatar5.webp" class="avatar avatar-xl rounded-0" alt="">

<div class="avatar avatar-sm rounded-circle border-2 border-white">
	<img alt="image" src="assets/images/avatar/small/avatar1.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-primary">
	<img alt="image" src="assets/images/avatar/small/avatar2.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-secondary">
	<img alt="image" src="assets/images/avatar/small/avatar3.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-success">
	<img alt="image" src="assets/images/avatar/small/avatar3.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-info">
	<img alt="image" src="assets/images/avatar/small/avatar3.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-warning">
	<img alt="image" src="assets/images/avatar/small/avatar3.webp">
</div>
<div class="avatar avatar-sm rounded-circle border-2 border-danger">
	<img alt="image" src="assets/images/avatar/small/avatar3.webp">
</div>

Avatar Icons

you can use avatar with <i> Tag.

contact_support
diamond
bolt
contact_support
diamond
bolt
contact_support
diamond
bolt
contact_support
diamond
bolt
contact_support
diamond
bolt 
<div class="avatar avatar-xs avatar-info">
	<i class="material-symbols-outlined">contact_support</i>
</div>
<div class="avatar avatar-xs avatar-success">
	<i class="material-symbols-outlined">diamond</i>
</div>
<div class="avatar avatar-xs avatar-warning">
	<i class="material-symbols-outlined">bolt</i>
</div>

<div class="avatar avatar-sm border-info text-bg-info">
	<i class="material-symbols-outlined">contact_support</i>
</div>
<div class="avatar avatar-sm border-success text-bg-success">
	<i class="material-symbols-outlined">diamond</i>
</div>
<div class="avatar avatar-sm border-warning text-bg-warning">
	<i class="material-symbols-outlined">bolt</i>
</div>

<div class="avatar avatar-info">
	<i class="material-symbols-outlined">contact_support</i>
</div>
<div class="avatar avatar-success">
	<i class="material-symbols-outlined">diamond</i>
</div>
<div class="avatar avatar-warning">
	<i class="material-symbols-outlined">bolt</i>
</div>

<div class="avatar avatar-lg avatar-info">
	<i class="material-symbols-outlined">contact_support</i>
</div>
<div class="avatar avatar-lg avatar-success">
	<i class="material-symbols-outlined">diamond</i>
</div>
<div class="avatar avatar-lg avatar-warning">
	<i class="material-symbols-outlined">bolt</i>
</div>

<div class="avatar avatar-xl avatar-info">
	<i class="material-symbols-outlined">contact_support</i>
</div>
<div class="avatar avatar-xl avatar-success">
	<i class="material-symbols-outlined">diamond</i>
</div>
<div class="avatar avatar-xl avatar-warning">
	<i class="material-symbols-outlined">bolt</i>
</div>