Avatars
<span class="avatar avatar-xxl avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-xl avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-lg avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="..." alt="...">
</span>
Initials
A
A
A
A
A
A
<span class="avatar avatar-xxl avatar-primary avatar-circle">
<span class="avatar-initials">A</span>
</span>
<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
<span class="avatar">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="...">
</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>
Ratio
<span class="avatar avatar-xxl avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-xl avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-lg avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-sm avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
<span class="avatar avatar-xs avatar-4x3">
<img class="avatar-img" src="..." alt="...">
</span>
Colors
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>
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>
Centered
<span class="avatar avatar-xl avatar-centered avatar-circle avatar-border-lg">
<img class="avatar-img" src="..." alt="...">
</span>
Group
A
2+
A
2+
A
2+
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-lg mb-1">
<span class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="...">
</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="..." alt="...">
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">2+</span>
</span>
</div>
<!-- End Avatar Group -->
</div>
<div class="col-auto">
<!-- Avatar Group -->
<div class="avatar-group mb-1">
<span class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="...">
</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="..." alt="...">
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">2+</span>
</span>
</div>
<!-- End Avatar Group -->
</div>
<div class="col-auto">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm mb-1">
<span class="avatar avatar-circle">
<img class="avatar-img" src="..." alt="...">
</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="..." alt="...">
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">2+</span>
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
<!-- End Row -->
Status
<div class="avatar">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-lg me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-lg avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-xl">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-xl avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-primary"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-secondary"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-success"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-danger"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-warning"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-info"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-light"></span>
</div>
<div class="avatar avatar-circle me-2">
<img class="avatar-img" src="..." alt="...">
<span class="avatar-status avatar-sm-status avatar-status-dark"></span>
</div>