Avatar

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.


Sizes

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.

Avatar
Avatar
Avatar
Avatar
Avatar
Avatar
<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");

Shapes

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.

Avatar
Avatar
Avatar
<div class="avatar me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2">
  <img src="..." alt="Avatar" class="rounded-3">
</div>
<div class="avatar">
  <img src="..." alt="Avatar">
</div>

Initials

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.

pi
pi
pi
pi
pi
pi
<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

Label Initials

pi
pi
pi
pi
pi
pi
<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

Status

To show status of the users, we have provided status indicators. An avatar can have a status indicator to indicate users availability.

Avatar
Avatar
Avatar
Avatar
<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

Groups

Include multiple avatar items inside an .avatar-group wrapper. You can also create list of the avatars.

Avatar
Avatar
Avatar
Avatar
<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.

Avatar
Avatar
Avatar
Avatar
<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.

  • Avatar
  • Avatar
  • Avatar
  • 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.

Avatar
Avatar
Avatar
+3
<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 text-body" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
  </div>
</div>

Variables

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
© 2017- Pixinvent, Hand-crafted & Made with ❤️