Notifications
unread notification
Emily Johnson
commented on a task in
Design Sprint
12 minutes ago
upload notification
Michael Lee
uploaded files to
Marketing Assets
25 minutes ago
Just now
alert
Sophia Ray
flagged an issue in
Bug Tracker
40 minutes ago
event notification
David Kim
scheduled a meeting for
UX Review
1 hour ago
edit
Isabella White
updated the document in
Product Specs
2 hours ago
30 minutes ago
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>