AvatarsExclusive
Contextual feedback messages
Sizes
Use .avatar class for showing avatar images. Avatars are available in different sizes from extra small to extra-extra large. E.g. .avatar-xl for extra large size.
<div class="avatar avatar-xxl avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xl avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-sm avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xs avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>Placeholder
Try .avatar-title within the avatar container if don't want to add image, just a placeholder. It's useful, when you don't have image to show.
SR
SR
SR
SR
SR
SR
<div class="avatar avatar-circle avatar-xxl">
<span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-xl">
<span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-lg">
<span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle">
<span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-xs">
<span class="avatar-title">SR</span>
</div>Status
With .avatar-{status} class you can add a little circle to the avatar to show the user's availability.
<div class="avatar avatar-circle avatar-online">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-busy">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-away">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-offline">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>Colors
When you use placeholder you can customize the color easily using text-bg-{color} helpers.
SR
SR
SR
SR
SR
SR
SR
SR
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-primary">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-secondary">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-success">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-danger">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-warning">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-info">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-light">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-dark">SR</span>
</div>Soft style
You can use soft version if you prefer that! Try with .text-bg-{color}-soft class.
SR
SR
SR
SR
SR
SR
SR
SR
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-primary-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-secondary-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-success-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-danger-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-warning-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-info-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-light-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
<span class="avatar-title text-bg-dark-soft">SR</span>
</div>Shape
Simply use .avatar or with and additional .avatar-circle class for a circle version, it's your choice!
<div class="avatar avatar-xl">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xl avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>Group
You can also group avatars together. The active avatar will jump to the front when you hover over with the cursor. Use .avatar-group class in a container div. Combine with different sizes or colors. We used a thin border style.
SR
2+
SR
2+
<div class="avatar-group">
<div class="avatar avatar-lg avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img border border-2 border-white">
</div>
<div class="avatar avatar-lg avatar-circle">
<span class="avatar-title border border-2 text-bg-dark border-white">SR</span>
</div>
<div class="avatar avatar-lg avatar-circle">
<img src="../assets/images/profiles/profile-02.jpeg" alt="..." class="avatar-img border border-2 border-white">
</div>
<div class="avatar avatar-lg avatar-circle">
<span class="avatar-title border border-2 text-bg-primary border-white">2+</span>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-circle">
<img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img border border-2 border-white">
</div>
<div class="avatar avatar-circle">
<span class="avatar-title border border-2 text-bg-dark border-white">SR</span>
</div>
<div class="avatar avatar-circle">
<img src="../assets/images/profiles/profile-02.jpeg" alt="..." class="avatar-img border border-2 border-white">
</div>
<div class="avatar avatar-circle">
<span class="avatar-title border border-2 text-bg-primary border-white">2+</span>
</div>
</div>