Avatars
Examples for opting different size of image classes.
Example
Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size.
<span class="avatar avatar-xxl avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xl avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-lg avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
Initials
A
A
A
A
A
<span class="avatar avatar-xl avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-lg avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-sm avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-xs avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
Shapes
Use border classes or .avatar-circle to make avatars more rounded.
<span class="avatar">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
A
A
<span class="avatar avatar-primary">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
Colors
A
A
A
A
A
A
A
A
A
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-secondary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-success avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-danger avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-warning avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-info avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-light avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
A
A
A
A
A
A
A
A
A
<span class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-secondary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-success avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-danger avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-warning avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-info avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-light avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
Border New
Use .avatar-border-lg to wrap avatars with white border color.
<span class="avatar avatar-xl avatar-circle avatar-border-lg">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
Centered New
Use .avatar-centered to center align.
<span class="avatar avatar-xl avatar-centered avatar-circle avatar-border-lg">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</span>
Group
Group your avatars with the help of a .avatar-group class.
A
3+
A
3+
A
3+
A
3+
A
3+
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar-group mb-1">
<span class="avatar avatar-xl avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xl avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-xl avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xl avatar-primary avatar-circle">
<span class="avatar-initials">3+</span>
</span>
</div>
</div>
<div class="col-auto">
<div class="avatar-group mb-1">
<span class="avatar avatar-lg avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="avatar avatar-lg avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-lg avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-lg avatar-primary avatar-circle">
<span class="avatar-initials">3+</span>
</span>
</div>
</div>
<div class="col-auto">
<div class="avatar-group mb-1">
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="avatar avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">3+</span>
</span>
</div>
</div>
<div class="col-auto">
<div class="avatar-group mb-1">
<span class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="avatar avatar-sm avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-sm avatar-primary avatar-circle">
<span class="avatar-initials">3+</span>
</span>
</div>
</div>
<div class="col-auto">
<div class="avatar-group mb-1">
<span class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xs avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xs avatar-primary avatar-circle">
<span class="avatar-initials">3+</span>
</span>
</div>
</div>
</div>
Status
Looking for larger or smaller status size? Add .avatar-sm-status or .avatar-lg-status for additional sizes.
<div class="avatar mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-primary"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-primary"></span>
</div>
Color variants
Use predefined color classes.
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-primary"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-secondary"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-success"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-danger"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-warning"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-info"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-light"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-dark"></span>
</div>
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<span class="avatar-status avatar-sm-status avatar-dark"></span>
</div>