Avatars

Examples for opting different size of image classes.

Example

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

Image Description Image Description Image Description Image Description Image Description
                    
                      <span class="avatar avatar-xl avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-lg avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-sm avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-xs avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                    
                  

Initials

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

Image Description Image Description
                    
                      <span class="avatar">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                      <span class="avatar avatar-circle">
                        <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                      </span>
                    
                  
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>
                    
                  

Colors

A 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>
                      <span class="avatar avatar-navy avatar-circle">
                        <span class="avatar-initials">A</span>
                      </span>
                    
                  
A 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>
                      <span class="avatar avatar-soft-navy avatar-circle">
                        <span class="avatar-initials">A</span>
                      </span>
                    
                  

Group

Group your avatars with the help of a .avatar-group class.

Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
                    
                      <div class="row align-items-center">
                        <div class="col">
                          <div class="avatar-group mb-1">
                            <span class="avatar avatar-xl avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-xl avatar-navy avatar-circle">
                              <span class="avatar-initials">A</span>
                            </span>
                            <span class="avatar avatar-xl avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-xl avatar-primary avatar-circle">
                              <span class="avatar-initials">3+</span>
                            </span>
                          </div>
                        </div>

                        <div class="col">
                          <div class="avatar-group mb-1">
                            <span class="avatar avatar-lg avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-lg avatar-navy avatar-circle">
                              <span class="avatar-initials">A</span>
                            </span>
                            <span class="avatar avatar-lg avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-lg avatar-primary avatar-circle">
                              <span class="avatar-initials">3+</span>
                            </span>
                          </div>
                        </div>

                        <div class="col">
                          <div class="avatar-group mb-1">
                            <span class="avatar avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-navy avatar-circle">
                              <span class="avatar-initials">A</span>
                            </span>
                            <span class="avatar avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-primary avatar-circle">
                              <span class="avatar-initials">3+</span>
                            </span>
                          </div>
                        </div>

                        <div class="col">
                          <div class="avatar-group mb-1">
                            <span class="avatar avatar-sm avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-sm avatar-navy avatar-circle">
                              <span class="avatar-initials">A</span>
                            </span>
                            <span class="avatar avatar-sm avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-sm avatar-primary avatar-circle">
                              <span class="avatar-initials">3+</span>
                            </span>
                          </div>
                        </div>

                        <div class="col">
                          <div class="avatar-group mb-1">
                            <span class="avatar avatar-xs avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-xs avatar-navy avatar-circle">
                              <span class="avatar-initials">A</span>
                            </span>
                            <span class="avatar avatar-xs avatar-circle">
                              <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </span>
                            <span class="avatar avatar-xs avatar-primary avatar-circle">
                              <span class="avatar-initials">3+</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    
                  

Status

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

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

Color variants

Use predefined color classes.

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