Avatars are user's face image that you can use throughout the design from tables to dialog or menus with options of sizes, shapes, status, initial options and group.
Avatar has 6 different sizes to use with the template. An avatar can have different sizes like larger and smaller avatar. Use .avatar
class to add avatar style image.
<div class="avatar avatar-xs me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-sm me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-md me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-lg me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-xl me-2">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
Class | Value |
---|---|
class="avatar avatar-{size}"
|
xs | sm | md | lg | xl |
Here is avatar size mixin which allow you to easily create avatar with different sizes.
@mixin template-avatar-style($height,$width,$font-size,$status-indicator-position:2px)
@include template-avatar-style("avatar-height", "avatar-width", "avatar-initial-font-size", "status-indicator-position");
An avatar can have different shapes by using Bootstrap's border-radius utilities classes
.rounded-circle
and .rounded
. Don't use any class for basic square shape avatar.
An avatar can have a temporary use of user's initial name while their photos are not yet available. Use
.avatar-initial
class to add avatar initial when no avatar image.
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-secondary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
<span class="avatar-initial rounded-circle bg-success">pi</span>
</div>
<div class="avatar me-2">
<span class="avatar-initial rounded-circle bg-danger">pi</span>
</div>
<div class="avatar avatar-md me-2">
<span class="avatar-initial rounded-circle bg-info">pi</span>
</div>
<div class="avatar avatar-lg me-2">
<span class="avatar-initial rounded-circle bg-warning">pi</span>
</div>
<div class="avatar avatar-xl me-2">
<span class="avatar-initial rounded-circle bg-primary">pi</span>
</div>
Class | Value |
---|---|
class="avatar-initial bg-{color}"
|
primary | secondary | success | danger | warning | info | dark |
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-secondary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
<span class="avatar-initial rounded-circle bg-label-success">pi</span>
</div>
<div class="avatar me-2">
<span class="avatar-initial rounded-circle bg-label-danger">pi</span>
</div>
<div class="avatar avatar-md me-2">
<span class="avatar-initial rounded-circle bg-label-info">pi</span>
</div>
<div class="avatar avatar-lg me-2">
<span class="avatar-initial rounded-circle bg-label-warning">pi</span>
</div>
<div class="avatar avatar-xl me-2">
<span class="avatar-initial rounded-circle bg-label-primary">pi</span>
</div>
Class | Value |
---|---|
class="avatar-initial bg-label-{color}"
|
primary | secondary | success | danger | warning | info | dark |
To show status of the users, we have provided status indicators. An avatar can have a status indicator to indicate users availability.
<div class="avatar me-2 avatar-online">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2 avatar-away">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2 avatar-busy">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-offline">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
Class | Value |
---|---|
class="avatar avatar-{status}"
|
online | away | busy | offline |
Include multiple avatar items inside an .avatar-group
wrapper. You can also create list of the
avatars.
<div class="avatar-group">
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle">
</div>
</div>
Pull up Groups
To hover animation of avatar group, you need .pull-up
class with avatar <img>
tag.
<div class="avatar-group">
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<img src="..." alt="Avatar" class="rounded-circle pull-up">
</div>
</div>
Groups with tooltip
You can also show avatar tooltip, when you hover on avatar.
<ul class="list-unstyled avatar-group">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="..." alt="Avatar">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="..." alt="Avatar">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="..." alt="Avatar">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar pull-up">
<img class="rounded-circle" src="..." alt="Avatar">
</li>
</ul>
Groups with count
You can also show avatar group with count. Add count initial at first as that will reverse this group options.
<div class="d-flex avatar-group mb-4 mt-4">
<div class="avatar">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<img src="assets/img/avatars/12.png" alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle pull-up">
</div>
<div class="avatar">
<span class="avatar-initial rounded-circle pull-up bg-lighter text-body" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</div>
</div>
Refer below mentioned for all the variables of avatar
Variable | Description |
---|---|
$avatar-size-xl
|
Variable for Extra Large size avatars |
$avatar-size-lg
|
Variable for Large size avatars |
$avatar-size-md
|
Variable for Medium size avatars |
$avatar-size
|
Variable for default size avatars |
$avatar-size-sm
|
Variable for Small size avatars |
$avatar-size-xs
|
Variable for Extra Small size avatars |
$avatar-initial-xl
|
Variable for Extra Lart size avatar initials |
$avatar-initial-lg
|
Variable for Large size avatar initials |
$avatar-initial-md
|
Variable for Medium size avatar initials |
$avatar-initial
|
Variable for Default size avatar initials |
$avatar-initial-sm
|
Variable for Small size avatar initials |
$avatar-initial-xs
|
Variable for Extra Small size avatar initials |
$avatar-group-border
|
Variable for avatar group border color |