logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Avatar
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total:$1.442,78

Basic example

image 
<div class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div>

Shapes

image
image
image 
<div class="avatar"><img src="avatar.jpg" alt="avatar"></div><div class="avatar"><img src="avatar.jpg" class="rounded" alt="avatar"></div><div class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div>

Sizes

image
image
image
image 
<div class="avatar avatar-xl"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div><div class="avatar avatar-lg"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div><div class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div><div class="avatar avatar-sm"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div>

Text

A
B
C
D 
<div class="avatar avatar-xl"><span class="avatar-text rounded-circle">A</span></div><div class="avatar avatar-lg"><span class="avatar-text rounded-circle">B</span></div><div class="avatar"><span class="avatar-text rounded-circle">C</span></div><div class="avatar avatar-sm"><span class="avatar-text rounded-circle">D</span></div>

Link

imageA 
<a href="#" class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="image"></a><a href="#" class="avatar"><span class="avatar-text rounded-circle">A</span></a>

Colors

P
S
S
D
W
I
L
D 
<div class="avatar avatar-primary me-1"><span class="avatar-text rounded-circle">P</span></div><div class="avatar avatar-secondary me-1"><span class="avatar-text rounded-circle">S</span></div><div class="avatar avatar-success me-1"><span class="avatar-text rounded-circle">S</span></div><div class="avatar avatar-danger me-1"><span class="avatar-text rounded-circle">D</span></div><div class="avatar avatar-warning me-1"><span class="avatar-text rounded-circle">W</span></div><div class="avatar avatar-info me-1"><span class="avatar-text rounded-circle">I</span></div><div class="avatar avatar-light me-1"><span class="avatar-text rounded-circle">L</span></div><div class="avatar avatar-dark"><span class="avatar-text rounded-circle">D</span></div>

State icon

image
image
image
image
image
image
image
image 
<div class="avatar avatar-state-primary"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div>
image
image
image
image 
<div class="avatar avatar-xl avatar-state-primary"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div>

Avatar group

E
avatar
S
avatar
C 
<div class="avatar-group"><div class="avatar avatar-success"><span class="avatar-text rounded-circle">E</span></div><div class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div><div class="avatar avatar-danger"><span class="avatar-text rounded-circle">S</span></div><div class="avatar"><img src="avatar.jpg" class="rounded-circle" alt="avatar"></div><div class="avatar avatar-primary"><span class="avatar-text rounded-circle">C</span></div></div>
On this page