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

image A 
<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