Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Images
Images & Avatars
Here are custom examples of images and avatars for your reference.
<!-- img-fluid -->
<img src="assets/images/stock/small-1.jpg" alt="image" class="img-fluid" />
<!-- .rounded -->
<img src="assets/images/stock/small-2.jpg" alt="image" class="img-fluid rounded" />
<!-- .rounded -->
<img src="assets/images/users/user-2.jpg" alt="image" class="img-fluid rounded" width="120" />
<!-- .rounded-circle -->
<img src="assets/images/users/user-7.jpg" alt="image" class="img-fluid rounded-circle" width="120" />
<!-- .img-thumbnail -->
<img src="assets/images/stock/small-5.jpg" alt="image" class="img-fluid img-thumbnail" />
<!-- .rounded-circle .img-thumbnail -->
<img src="assets/images/users/user-8.jpg" alt="image" class="img-fluid rounded-circle img-thumbnail" width="120" />
Avatars with different sizes and shapes.
.img-fluid
.rounded
.rounded
.rounded-circle
.img-thumbnail
.rounded-circle .img-thumbnail
<!-- .avatar-xs -->
<img src="assets/images/users/user-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
<!-- .avatar-xs -->
<div class="avatar-xs mx-auto">
<span class="avatar-title text-bg-primary rounded">
xs
</span>
</div>
<!-- .avatar-xs -->
<div class="avatar-xs mx-auto">
<span class="avatar-title bg-primary-subtle text-primary rounded">
xs
</span>
</div>
<!-- .avatar-sm -->
<img src="assets/images/users/user-3.jpg" alt="image" class="img-fluid avatar-sm rounded">
<!-- .avatar-sm -->
<div class="avatar-sm mx-auto">
<span class="avatar-title text-bg-primary rounded">
sm
</span>
</div>
<!-- .avatar-sm -->
<div class="avatar-sm mx-auto">
<span class="avatar-title bg-primary-subtle text-primary rounded">
sm
</span>
</div>
<!-- .avatar-md -->
<img src="assets/images/users/user-4.jpg" alt="image" class="img-fluid avatar-md rounded">
<!-- .avatar-md -->
<div class="avatar-md mx-auto">
<span class="avatar-title text-bg-primary rounded">
md
</span>
</div>
<!-- .avatar-md -->
<div class="avatar-md mx-auto">
<span class="avatar-title bg-primary-subtle text-primary rounded">
md
</span>
</div>
<!-- .avatar-lg -->
<img src="assets/images/users/user-5.jpg" alt="image" class="img-fluid avatar-lg rounded">
<!-- .avatar-lg -->
<div class="avatar-lg mx-auto">
<span class="avatar-title text-bg-primary rounded">
LG
</span>
</div>
<!-- .avatar-lg -->
<div class="avatar-lg mx-auto">
<span class="avatar-title bg-primary-subtle text-primary rounded">
LG
</span>
</div>
<!-- .avatar-xl -->
<img src="assets/images/users/user-6.jpg" alt="image" class="img-fluid avatar-xl rounded">
<!-- .avatar-xl -->
<div class="avatar-xl mx-auto">
<span class="avatar-title text-bg-primary rounded">
XL
</span>
</div>
<!-- .avatar-xl -->
<div class="avatar-xl mx-auto">
<span class="avatar-title bg-primary-subtle text-primary rounded">
XL
</span>
</div>
.avatar-xs
.avatar-xs
.avatar-xs
.avatar-sm
.avatar-sm
.avatar-sm
.avatar-md
.avatar-md
.avatar-md
.avatar-lg
.avatar-lg
.avatar-lg
.avatar-xl
.avatar-xl
.avatar-xl
<!-- .avatar-xs -->
<img src="assets/images/users/user-7.jpg" alt="image" class="img-fluid avatar-xs rounded-circle">
<!-- .avatar-xs -->
<div class="avatar-xs mx-auto">
<span class="avatar-title text-bg-info rounded-circle">
xs
</span>
</div>
<!-- .avatar-xs -->
<div class="avatar-xs mx-auto">
<span class="avatar-title bg-info-subtle text-info rounded-circle">
xs
</span>
</div>
<!-- .avatar-sm -->
<img src="assets/images/users/user-8.jpg" alt="image" class="img-fluid avatar-sm rounded-circle">
<!-- .avatar-sm -->
<div class="avatar-sm mx-auto">
<span class="avatar-title text-bg-info rounded-circle">
sm
</span>
</div>
<!-- .avatar-sm -->
<div class="avatar-sm mx-auto">
<span class="avatar-title bg-info-subtle text-info rounded-circle">
sm
</span>
</div>
<!-- .avatar-md -->
<img src="assets/images/users/user-9.jpg" alt="image" class="img-fluid avatar-md rounded-circle">
<!-- .avatar-md -->
<div class="avatar-md mx-auto">
<span class="avatar-title text-bg-info rounded-circle">
md
</span>
</div>
<!-- .avatar-md -->
<div class="avatar-md mx-auto">
<span class="avatar-title bg-info-subtle text-info rounded-circle">
md
</span>
</div>
<!-- .avatar-lg -->
<img src="assets/images/users/user-10.jpg" alt="image" class="img-fluid avatar-lg rounded-circle">
<!-- .avatar-lg -->
<div class="avatar-lg mx-auto">
<span class="avatar-title text-bg-info rounded-circle">
LG
</span>
</div>
<!-- .avatar-lg -->
<div class="avatar-lg mx-auto">
<span class="avatar-title bg-info-subtle text-info rounded-circle">
LG
</span>
</div>
<!-- .avatar-xl -->
<img src="assets/images/users/user-1.jpg" alt="image" class="img-fluid avatar-xl rounded-circle">
<!-- .avatar-xl -->
<div class="avatar-xl mx-auto">
<span class="avatar-title text-bg-info rounded-circle">
XL
</span>
</div>
<!-- .avatar-xl -->
<div class="avatar-xl mx-auto">
<span class="avatar-title bg-info-subtle text-info rounded-circle">
XL
</span>
</div>
.avatar-xs
.avatar-xs
.avatar-xs
.avatar-sm
.avatar-sm
.avatar-sm
.avatar-md
.avatar-md
.avatar-md
.avatar-lg
.avatar-lg
.avatar-lg
.avatar-xl
.avatar-xl
.avatar-xl
<!-- Default Group -->
<div class="avatar-group">
<div class="avatar">
<img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-sm">
</div>
<div class="avatar">
<img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-sm">
</div>
<div class="avatar">
<img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-sm">
</div>
<div class="avatar">
<img src="assets/images/users/user-8.jpg" alt="" class="rounded-circle avatar-sm">
</div>
<div class="avatar">
<img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-sm">
</div>
</div>
<!-- Default Group (Soft) -->
<div class="avatar-group">
<div class="avatar avatar-md">
<span class="avatar-title text-bg-purple rounded-circle fw-bold">
D
</span>
</div>
<div class="avatar avatar-md">
<span class="avatar-title text-bg-primary rounded-circle fw-bold">
K
</span>
</div>
<div class="avatar avatar-md">
<span class="avatar-title text-bg-secondary rounded-circle fw-bold">
H
</span>
</div>
<div class="avatar avatar-md">
<span class="avatar-title text-bg-warning rounded-circle fw-bold">
L
</span>
</div>
<div class="avatar avatar-md">
<span class="avatar-title text-bg-info rounded-circle fw-bold">
G
</span>
</div>
</div>
<!-- Default Group (Soft) -->
<div class="avatar-group">
<div class="avatar avatar-lg">
<span class="avatar-title bg-purple-subtle text-purple rounded-circle fw-bold shadow">
D
</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title bg-primary-subtle text-primary rounded-circle fw-bold shadow">
K
</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title bg-secondary-subtle text-secondary rounded-circle fw-bold shadow">
H
</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title bg-warning-subtle text-warning rounded-circle fw-bold shadow">
L
</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title bg-info-subtle text-info rounded-circle fw-bold shadow">
G
</span>
</div>
</div>