1. Home
  2. Components
  3. Avatars

Size

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

Avatar
Avatar
Avatar
Avatar
Avatar
Avatar
<div class="avatar avatar-xxl">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

Status Indicator

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

Avatar
Avatar
Avatar
Avatar
Avatar
Avatar
<div class="avatar avatar-online">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-offline">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

Shape

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

Avatar
Avatar
Avatar
Avatar
Avatar
Avatar
<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
</div>

<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" 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.

Avatar
Avatar
Avatar
Avatar
<div class="avatar avatar-4by3">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
</div>

Initials

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

LB
LB
LB
LB
LB
LB
<div class="avatar">
  <span class="avatar-title rounded-circle">LB</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.

Avatar
Avatar
Avatar
LB
Avatar
Avatar
Avatar
LB
Avatar
Avatar
Avatar
LB
<div class="avatar-group">
  <div class="avatar">
    <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle">LB</span>
  </div>
</div>

Huma Huma

Huma is a beautifully crafted user interface for modern Business Admin Web Applications, with examples for many pages needed for Customer Relationship Management, Enterprise Resource Planning, Human Resources, Content Management System, Project Management, Tasks, eCommerce, Messaging and Account Management.

Follow us

English arrow_drop_down

Terms Privacy policy

Copyright 2019 © All rights reserved.