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.

<div class="avatar avatar-xxl">

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

                                                </div>

                                                

                                                <div class="avatar avatar-xl">

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

                                                </div>

                                                

                                                <div class="avatar avatar-lg">

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

                                                </div>

                                                

                                                <div class="avatar">

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

                                                </div>

                                                

                                                <div class="avatar avatar-sm">

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

                                                </div>

                                                

                                                <div class="avatar avatar-xs">

                                                  <img src="assets/images/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.

<div class="avatar avatar-online">

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

                                                </div>

                                                

                                                <div class="avatar avatar-offline">

                                                  <img src="assets/images/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.

<div class="avatar">

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

                                                </div>

                                                

                                                <div class="avatar">

                                                  <img src="assets/images/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.

<div class="avatar avatar-4by3">

                                                  <img src="assets/images/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.

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

<div class="avatar-group">

                                                  <div class="avatar">

                                                    <img src="assets/images/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>