Avatar
<div class="card">
<div class="card-header">
<h5>Colors</h5>
<p class="text-muted">Use color <code>bg-*</code> to change the background theme color of avatar.
</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<span class="bg-primary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-success h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-info h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-warning h-45 w-45 d-flex-center b-r-50">
P
</span>
<span class="bg-danger h-45 w-45 d-flex-center b-r-50">
AD
</span>
</div>
</div>
</div>
AR
TE
<div class="card equal-card">
<div class="card-header">
<h5>Outline</h5>
<p class="text-muted">For outline style use <code>text-outline-*</code> class.</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<span class="text-outline-primary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-outline-secondary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-outline-success h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-outline-info h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-outline-warning h-45 w-45 d-flex-center b-r-50">
AR
</span>
<span class="text-outline-danger h-45 w-45 d-flex-center b-r-50">
TE
</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Images</h5>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/1.png" alt="avatar" class="img-fluid">
</div>
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/2.png" alt="avatar" class="img-fluid">
</div>
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/3.png" alt="avatar" class="img-fluid">
</div>
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/4.png" alt="avatar" class="img-fluid">
</div>
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/5.png" alt="avatar" class="img-fluid">
</div>
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/6.png" alt="avatar" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="card equal-card">
<div class="card-header">
<h5>Size</h5>
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="d-flex gap-3 flex-wrap">
<span class="bg-secondary h-30 w-30 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-success h-35 w-35 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-info h-40 w-40 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-warning h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="bg-danger h-50 w-50 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Light background</h5>
<p class="text-muted">For light style use <code>text-light-*</code> class.</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<span class="text-light-primary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-success h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-info h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-warning h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-danger h-45 w-45 d-flex-center b-r-50">
<i class="fa-solid fa-user"></i>
</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Light background</h5>
<p class="text-muted">For light style use <code>text-light-*</code> class.</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<span class="text-light-primary h-45 w-45 d-flex-center b-r-0">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-6">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-success h-45 w-45 d-flex-center b-r-10">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-info h-45 w-45 d-flex-center b-r-14">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-warning h-45 w-45 d-flex-center b-r-20">
<i class="fa-solid fa-user"></i>
</span>
<span class="text-light-danger h-45 w-45 d-flex-center b-r-30">
<i class="fa-solid fa-user"></i>
</span>
</div>
</div>
</div>
3
<div class="card equal-card">
<div class="card-header">
<h5>Indicator position and icon</h5>
<p class="text-muted">Radius avatar text in soft color example</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<span class="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
<i class="fa-solid fa-user"></i>
<span
class="position-absolute top-5 start-1 top-0 p-1 bg-danger border border-light rounded-circle"></span>
</span>
<span class="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
<i class="fa-solid fa-user"></i>
<span
class="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
</span>
<span class="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
<i class="fa-solid fa-user"></i>
<span
class="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
</span>
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/1.png" alt="avatar" class="img-fluid b-r-50">
<span
class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/4.png" alt="avatar" class="img-fluid b-r-50">
<span
class="position-absolute top-0 end-0 d-flex-center bg-warning border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">3</span>
</span>
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/6.png" alt="avatar" class="img-fluid b-r-50">
<span
class="position-absolute top-0 d-flex-center bg-danger border border-light rounded-circle text-center h-20 w-20 f-s-10 start-30"><i
class="ti ti-mail"></i></span>
</span>
</div>
</div>
</div>
- A
- CD
- XYZ
- 2+
-
-
-
- 10+
-
-
-
-
- 5+
<div class="card">
<div class="card-header">
<h5>Group with tooltip</h5>
<p class="text-muted">User group with tooltip</p>
</div>
<div class="card-body">
<div class="d-flex gap-3 flex-wrap">
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/4.png" alt="avatar" class="img-fluid">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success"
data-bs-toggle="tooltip" data-bs-title="Lennon Briggs">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/5.png" alt="avatar" class="img-fluid">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger"
data-bs-toggle="tooltip" data-bs-title="Maya Horton">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/6.png" alt="avatar" class="img-fluid">
</li>
</ul>
<ul class="avatar-group">
<li class="text-bg-primary h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Athena Stewart">
<i class="fa-solid fa-user"></i>
</li>
<li class="text-bg-secondary h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Connor Collins">
<i class="fa-solid fa-user"></i>
</li>
<li class="text-bg-success h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Raiden Simpson">
<i class="fa-solid fa-user"></i>
</li>
</ul>
<ul class="avatar-group">
<li class="text-bg-danger h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Everlee Lambert">
A
</li>
<li class="text-bg-dark h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Hunter Scott">
CD
</li>
<li class="text-bg-warning h-45 w-45 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="Hunter Scott">
XYZ
</li>
<li class="text-bg-secondary h-30 w-30 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="2 More">
2+
</li>
</ul>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary b-2-light"
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/4.png" alt="avatar" class="img-fluid">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success b-2-light"
data-bs-toggle="tooltip" data-bs-title="Eva Bailey">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/5.png" alt="avatar" class="img-fluid">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger b-2-light"
data-bs-toggle="tooltip" data-bs-title="Michael Hughes">
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/6.png" alt="avatar" class="img-fluid">
</li>
<li class="text-bg-secondary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="10 More">
10+
</li>
</ul>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
<span
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/4.png" alt="avatar" class="img-fluid b-r-50 overflow-hidden">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
<span
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/1.png" alt="avatar" class="img-fluid b-r-50 overflow-hidden">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
<span
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/2.png" alt="avatar" class="img-fluid b-r-50 overflow-hidden">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
<span
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
<img src="/diy_templates/bootstrapmb-16149/assets/images/avatar/3.png" alt="avatar" class="img-fluid b-r-50 overflow-hidden">
</li>
<li class="text-bg-primary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
data-bs-title="5 More">
5+
</li>
</ul>
</div>
</div>
</div>