Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Shapes
Default avatar is square in shape. For rounded and circle avatar add .avatar-rounded modifier classes respectively.
<div class="avatar">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
rounded / square |
Sizing
Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm or .avatar-xs for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.
<div class="avatar avatar-rounded avatar-xxxl">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
xxxl / xxl / xl / lg / md / xs / xxs |
Indicators on avatar
Fancy larger or smaller avatar? Add position-relative and position classes with badge Indicators.
<div class="avatar avatar-rounded position-relative">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
<span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
</div>
| Class | Values |
|---|---|
class="badge badge-success badge-indicator badge-indicator-xl position-[Value]" |
top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow |
Badge on avatar
Fancy larger or smaller avatar? Add position-relative and position classes with badge.
10
10
5
5
5
5
5
5
<div class="avatar avatar-rounded position-relative">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
<span class="badge badge-success badge-xl position-bottom-end-overflow-1">10</span>
</div>
| Class | Values |
|---|---|
class="badge badge-success badge-indicator-xl position-[Value]" |
top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow |
Avatar with initials
Wrap .initial-wrap with .avatar classess.
PR
PR
PR
PR
PR
PR
PR
PR
PR
<div class="avatar avatar-xxl avatar-primary avatar-rounded">
<span class="initial-wrap">PR</span>
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
xxxl / xxl / xl / lg / md / xs / xxs |
Avatar with Icons
Add icons inside .initial-wrap classes.
<div class="avatar avatar-icon avatar-xxxl avatar-primary avatar-rounded">
<span class="initial-wrap"><span class="feather-icon"><i data-feather="settings"></i></span>
</span>
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
xxxl / xxl / xl / lg / md / xs / xxs |
Avatar color option
Add color classes like .avatar-primary,.avatar-info with avatar.
PR
PR
PR
PR
PR
PR
PR
PR
PR
<div class="avatar avatar-primary avatar-rounded">
<span class="initial-wrap">PR</span>
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark |
Avatar soft
Add soft color classes like.avatar .avatar-soft-* for soft colors.
PR
PR
PR
PR
PR
PR
PR
PR
PR
<div class="avatar avatar-soft-primary avatar-rounded">
<span class="initial-wrap">PR</span>
</div>
| Class | Values |
|---|---|
class="avatar avatar-soft-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark |
Avatar with logo
Use .avatar-logo with avatar.
<div class="avatar avatar-logo avatar-rounded avatar-xl">
<span class="initial-wrap">
<img src="dist/img/logo4.jpg" alt="logo">
</span>
</div>
| Class | Values |
|---|---|
class="avatar avatar-[value]" |
xxxl / xxl / xl / lg / md / xs / xxs |
Groups
In need of an avatar, but not the image avatar? Replace the default modifier class with avatar-group avatar-group-* ones to create avatar with name initials.
RD
RD
<div class="avatar-group">
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-primary avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<span class="initial-wrap"><span>RD</span></span>
</div>
</div>
| Class | Values |
|---|---|
class="avatar-group avatar-group-[value]" |
lg / sm |
Overlapped Avatar Group
For overlapped group of avatars replace default modifier class with .avatar-group-overlapped.
RD
RD
<div class="avatar-group avatar-group-overlapped">
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>
<div class="avatar avatar-primary avatar-rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip text">
<span class="initial-wrap"><span>RD</span></span>
</div>
</div>
| Class | Values |
|---|---|
class="avatar-group avatar-group-overlapped avatar-group-[value]" |
lg / sm |