Avatars

Goodkit Exclusive

Create and group avatars of different sizes and shapes with a single component.

Sizing

Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.

...
...
...
...
...
...
<div class="avatar avatar-xxl">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Status Indicator

Add an online or offline status indicator to show user's availability.

...
...
...
...
...
...
<div class="avatar avatar-online">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-offline">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Shape

Change the shape of an avatar with the default Bootstrap image classes.

...
...
...
...
...
...
<div class="avatar">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded">
</div>

<div class="avatar">
  <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Ratio

Change the proportional relationship between the width and height of an avatar to 4 by 3 with an .avatar-4by3 modifier.

...
...
...
...
<div class="avatar avatar-lg avatar-4by3">
  <img src="../assets/img/photos/photo-1.jpg" alt="..." class="avatar-img rounded">
</div>

Initials

You won't always have an image for every user, so easily use initials instead.

CF
CF
CF
CF
CF
CF
<div class="avatar avatar-xxl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-lg">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-sm">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xs">
  <span class="avatar-title rounded-circle">CF</span>
</div>

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an <a> to link to the corresponding profile.

...
...
...
CF
...
...
...
CF
...
...
...
CF
<div class="avatar-group">
  <div class="avatar">
    <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle">CF</span>
  </div>
</div>