Avatars - Documentation | Front - Multipurpose Responsive Template

Example

Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size.

Preview
HTML

              
                <span class="avatar avatar-xxl avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-xl avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-lg avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-sm avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-xs avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                </span>

Initials

In cases where no image, use initials instead.

Preview
HTML

A A A A A A

              
                <span class="avatar avatar-xxl avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-xl avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-lg avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-sm avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-xs avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>

Shapes

Use border classes or .avatar-circle to make avatars more rounded.

Preview
HTML

              
                <span class="avatar">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-circle">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                </span>

Preview
HTML

A A

              
                <span class="avatar avatar-primary">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>

Ratio

Enable 4:3 (four-by-three) ratio size between the width and the height of an avatar using an .avatar-4x3 modifier class.

Preview
HTML

              
                <span class="avatar avatar-xxl avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-xl avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-lg avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-sm avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>
                <span class="avatar avatar-xs avatar-4x3">
                  <img class="avatar-img" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                </span>

Colors

Front includes several predefined avatar styles for more usage. Use .avatar-* classes.

Preview
HTML

A A A A A A A A

              
                <span class="avatar avatar-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-secondary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-success avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-danger avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-warning avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-info avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-light avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-dark avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>

Use .avatar-soft-* classes.

Preview
HTML

A A A A A A A A

              
                <span class="avatar avatar-soft-primary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-secondary avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-success avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-danger avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-warning avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-info avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-light avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>
                <span class="avatar avatar-soft-dark avatar-circle">
                  <span class="avatar-initials">A</span>
                </span>

Centered

Use .avatar-centered to center align.

Preview
HTML

              
                <span class="avatar avatar-xl avatar-centered avatar-circle avatar-border-lg">
                  <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                </span>

Group

Group your avatars with the help of a .avatar-group class. Available for all avatar sizes classes.

Preview
HTML

              
                <div class="row align-items-center">
                  <div class="col-auto">
                    <!-- Avatar Group -->
                    <div class="avatar-group avatar-group-lg mb-1">
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-dark avatar-circle">
                        <span class="avatar-initials">A</span>
                      </span>
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-primary avatar-circle">
                        <span class="avatar-initials">2+</span>
                      </span>
                    </div>
                    <!-- End Avatar Group -->
                  </div>

                  <div class="col-auto">
                    <!-- Avatar Group -->
                    <div class="avatar-group mb-1">
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-dark avatar-circle">
                        <span class="avatar-initials">A</span>
                      </span>
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-primary avatar-circle">
                        <span class="avatar-initials">2+</span>
                      </span>
                    </div>
                    <!-- End Avatar Group -->
                  </div>

                  <div class="col-auto">
                    <!-- Avatar Group -->
                    <div class="avatar-group avatar-group-sm mb-1">
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-dark avatar-circle">
                        <span class="avatar-initials">A</span>
                      </span>
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-primary avatar-circle">
                        <span class="avatar-initials">2+</span>
                      </span>
                    </div>
                    <!-- End Avatar Group -->
                  </div>
                </div>
                <!-- End Row -->

Status

Use .avatar-status to add all kinds of status indicators.

Looking for larger or smaller status size? Add .avatar-sm-status or .avatar-lg-status for additional sizes.

Preview
HTML

              
                <div class="avatar">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-primary"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-primary"></span>
                </div>

                <div class="avatar avatar-lg me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-status avatar-status-primary"></span>
                </div>
                <div class="avatar avatar-lg avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-status avatar-status-primary"></span>
                </div>

                <div class="avatar avatar-xl">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-status-primary"></span>
                </div>
                <div class="avatar avatar-xl avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-status-primary"></span>
                </div>

Preview
HTML

              
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-primary"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-secondary"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-danger"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-warning"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-info"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-light"></span>
                </div>
                <div class="avatar avatar-circle me-2">
                  <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                  <span class="avatar-status avatar-sm-status avatar-status-dark"></span>
                </div>