Avatar
Avatars
<!-- avatar xxl -->
<span class="avatar avatar-xxl ">
<img src="../assets/images/avatar/avatar-1.jpg" alt=""
class="rounded-circle">
</span>
<!-- avatar xl -->
<span class="avatar avatar-xl ">
<img src="../assets/images/avatar/avatar-1.jpg" alt="avatar" class="rounded-circle">
</span>
<!-- avatar lg -->
<span class="avatar avatar-lg ">
<img src="../assets/images/avatar/avatar-1.jpg" alt="avatar" class="rounded-circle">
</span>
<!-- avatar md -->
<span class="avatar avatar-md ">
<img src="../assets/images/avatar/avatar-1.jpg" alt="avatar" class="rounded-circle">
</span>
<!-- avatar sm -->
<span class="avatar avatar-sm ">
<img src="../assets/images/avatar/avatar-1.jpg" alt="avatar" class="rounded-circle">
</span>
<!-- avatar xs -->
<span class="avatar avatar-xs ">
<img src="../assets/images/avatar/avatar-1.jpg" alt="avatar" class="rounded-circle">
</span>Initials
DS
DS
DS
DS
DS
DS
<!-- avatar intials xxl -->
<span class="avatar avatar-xxl avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>
<!-- avatar intials xl -->
<span class="avatar avatar-xl avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>
<!-- avatar intials lg -->
<span class="avatar avatar-lg avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>
<!-- avatar intials md -->
<span class="avatar avatar-md avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>
<!-- avatar intials sm -->
<span class="avatar avatar-sm avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>
<!-- avatar intials xs -->
<span class="avatar avatar-xs avatar-primary">
<span class="avatar-initials rounded-circle ">DS</span>
</span>Status Indicator
<!-- avatar status indicator xxl-->
<span class="avatar avatar-xxl avatar-indicators
avatar-online">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>
<!-- avatar status indicator xl-->
<span class="avatar avatar-xl avatar-indicators avatar-away">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>
<!-- avatar status indicator lg-->
<span class="avatar avatar-lg avatar-indicators
avatar-offline">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>
<!-- avatar status indicator md-->
<span class="avatar avatar-md avatar-indicators
avatar-online">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>
<!-- avatar status indicator sm-->
<span class="avatar avatar-sm avatar-indicators avatar-away">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>
<!-- avatar status indicator xs-->
<span class="avatar avatar-xs avatar-indicators
avatar-online">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
</span>Varified Badge Avatar
<!-- avatar varified badge -->
<div class="position-relative">
<img src="../assets/images/avatar/avatar-1.jpg" alt=""
class="rounded-circle avatar-xl" />
<a href="#"
class="position-absolute mt-2 ms-n4" data-bs-toggle="tooltip" data-placement="top"
title="Verifed">
<img src="../assets/images/svg/checked-mark.svg" alt=""
height="30"
width="30"
/>
</a>
</div>Groups
DS
DS
DS
DS
<!-- avatar group -->
<div class="d-lg-flex">
<div class="avatar-group me-5">
<span class="avatar avatar-lg">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
</span>
<span class="avatar avatar-lg">
<img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
</span>
<span class="avatar avatar-lg">
<img alt="avatar" src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle" />
</span>
<span class="avatar avatar-lg">
<img alt="avatar" src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle" />
</span>
</div>
<!-- avatar group -->
<div class="avatar-group">
<span class="avatar avatar-lg avatar-primary">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<span class="avatar avatar-lg avatar-warning">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<span class="avatar avatar-lg avatar-success">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<span class="avatar avatar-lg avatar-info">
<span class="avatar-initials rounded-circle">DS</span>
</span>
</div>
</div>Shape
DS
DS
<!-- avatar shape -->
<div class="d-lg-flex">
<div class="me-4">
<span class="avatar avatar-lg me-2">
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded" />
</span>
<span class="avatar avatar-lg">
<img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
</span>
</div>
<div>
<span class="avatar avatar-lg avatar-primary">
<span class="avatar-initials rounded">DS</span>
</span>
<span class="avatar avatar-lg avatar-warning">
<span class="avatar-initials rounded-circle">DS</span>
</span>
</div>
</div>Color
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
DS
<div>
<!-- avatar primary -->
<span class="avatar avatar-md avatar-primary">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar secondary -->
<span class="avatar avatar-md avatar-secondary">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar success -->
<span class="avatar avatar-md avatar-success">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar warning -->
<span class="avatar avatar-md avatar-warning">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar info -->
<span class="avatar avatar-md avatar-info">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar danger -->
<span class="avatar avatar-md avatar-danger">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar light -->
<span class="avatar avatar-md avatar-light">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar dark -->
<span class="avatar avatar-md avatar-dark">
<span class="avatar-initials rounded-circle">DS</span>
</span>
</div>
<div>
<!-- avatar primary -->
<span class="avatar avatar-md bg-primary-subtle
text-primary-emphasis rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar secondary -->
<span class="avatar avatar-md bg-secondary-subtle
text-secondary-emphasis rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar success -->
<span class="avatar avatar-md bg-success-subtle
text-success-emphasis rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar warning -->
<span class="avatar avatar-md bg-warning-subtle
text-warning-emphasis rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar info -->
<span class="avatar avatar-md bg-info-subtle text-info-emphasis
rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar danger -->
<span class="avatar avatar-md bg-danger-subtle
text-danger-emphasis rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar light -->
<span class="avatar avatar-md bg-light-subtle text-light-emphasis
rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
<!-- avatar dark -->
<span class="avatar avatar-md bg-dark-subtle text-dark-emphasis
rounded-circle">
<span class="avatar-initials rounded-circle">DS</span>
</span>
</div>