Avatar

Bootstrap 5 Avatar component

Responsive Avatar built with Bootstrap 5. Examples of circle or square avatar, avatar in a card, inside the navbar, testimonial carousel, profile card & more.

Basic example

This is a basic example of a circle-shaped avatar. The roundness is achieved by adding the .rounded-circle class. You can experiment with different border radius to change the roundness of the image corners. Make sure to check out the Image documentation to learn more about image options and responsiveness.

Bootstrap 5 Extended Avatar
Edit in sandbox 
        
            
          <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle" style="width: 150px;"
            alt="Avatar" />

With shadows

Adding a shadow to your avatar will make it stand out. You can generate a custom shadow with our generator.

Bootstrap 5 Extended Avatar
Edit in sandbox 
        
            
          <img src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp" class="rounded-circle shadow-4"
            style="width: 150px;" alt="Avatar" />

Square

The default image shape is rectangular. If you need your avatar to be a square you need to make sure that your source image is of equal width an height, or overwrite them with CSS. You can also make the corners slightly rounded, like in the example below, in order to create a smoother design.

Rounded corners are applied with the .rounded-3 class, you can use different roundness levels from our Border Radius docs, or even create a fancy, irregular border shape with our Fancy Shapes Generator.

Bootstrap 5 Extended Avatar
Edit in sandbox 
        
            
          <img src="https://mdbcdn.b-cdn.net/img/new/avatars/5.webp" class="rounded-3" style="width: 150px;"
            alt="Avatar" />

With content

Add additional content to your avatar. The most common use case is adding name and surname along with a text description, but you can also use a variety of other elements like Badges, Buttons, Text Animations, Icons or even Flags that indicate the country of origin.

Bootstrap 5 Extended Avatar
John Doe

Web designer PRO

Edit in sandbox 
        
            
          <img src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" class="rounded-circle mb-3" style="width: 150px;"
            alt="Avatar" />

          <h5 class="mb-2"><strong>John Doe</strong></h5>
          <p class="text-muted">Web designer <span class="badge bg-primary">PRO</span></p>

Inside the navbar

One of the most common design practices is to differentiate the navbar for a logged in user from a navbar for an unlogged user by embedding the avatar inside the navbar. Thanks to this approach, the user knows if he's signed in at first glance.

The example below also uses a Dropdown with a user profile menu.

Learn how to create your navbar from scratch in our Navbar docs or create a customized navbar in seconds with our Navbar Builder.

Edit in sandbox 
        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
            <div class="container-fluid">
              <ul class="navbar-nav">
                <!-- Avatar -->
                <li class="nav-item dropdown">
                  <a data-mdb-dropdown-init class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdownMenuLink"
                    role="button" data-mdb-toggle="dropdown" aria-expanded="false">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp" class="rounded-circle"
                      height="22" alt="Avatar" loading="lazy" />
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li>
                      <a class="dropdown-item" href="#">My profile</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Settings</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Logout</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </nav>

Testimonials

Customer reviews with avatars, can also work great within simple Cards. Check our our Card Generator in order to create a basic card layout template and add custom CSS to experiment with avatar composition within a card.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Maria Smantha

Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.

Lisa Cudrow

Neque cupiditate assumenda in maiores repudi mollitia architecto.

John Smith

Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.

Edit in sandbox 
        
            
          <section>
            <div class="row d-flex justify-content-center">
              <div class="col-md-10 col-xl-8 text-center">
                <h3 class="mb-4">Testimonials</h3>
                <p class="mb-4 pb-2 mb-md-5 pb-md-0">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                  numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
                  quisquam eum porro a pariatur veniam.
                </p>
              </div>
            </div>

            <div class="row text-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #9d789b;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">Maria Smantha</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet eos adipisci,
                      consectetur adipisicing elit.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #7a81a8;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">Lisa Cudrow</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Neque cupiditate assumenda in maiores
                      repudi mollitia architecto.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 mb-0">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #6d5b98;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">John Smith</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Delectus impedit saepe officiis ab
                      aliquam repellat rem unde ducimus.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .testimonial-card .card-up {
          height: 120px;
          overflow: hidden;
          border-top-left-radius: 0.25rem;
          border-top-right-radius: 0.25rem;
          }

          .testimonial-card .avatar {
          width: 110px;
          margin-top: -60px;
          overflow: hidden;
          border: 3px solid #fff;
          border-radius: 50%;
          }

Profile

Avatars are often used in user profile cards. The example below was created with a basic Bootstrap Grid. You can use the Grid Builder to quickly sketch out the general grid layout.

Generic placeholder image
Danny McLoan

Senior Journalist

Articles

41

Followers

976

Rating

8.5

Edit in sandbox 
        
            
          <section style="background-color: #9de2ff;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-8">
                  <div class="card" style="border-radius: 15px;">
                    <div class="card-body p-4">
                      <div class="d-flex">
                        <div class="flex-shrink-0">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp"
                            alt="Generic placeholder image" class="img-fluid"
                            style="width: 180px; border-radius: 10px;" />
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <h5 class="mb-1">Danny McLoan</h5>
                          <p class="mb-2 pb-1">
                            Senior Journalist
                          </p>
                          <div class="d-flex justify-content-start rounded-3 p-2 mb-2 bg-body-tertiary">
                            <div>
                              <p class="small text-muted mb-1">
                                Articles
                              </p>
                              <p class="mb-0">41</p>
                            </div>
                            <div class="px-3">
                              <p class="small text-muted mb-1">
                                Followers
                              </p>
                              <p class="mb-0">976</p>
                            </div>
                            <div>
                              <p class="small text-muted mb-1">
                                Rating
                              </p>
                              <p class="mb-0">8.5</p>
                            </div>
                          </div>
                          <div class="d-flex pt-1">
                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary me-1 flex-grow-1">
                              Chat
                            </button>
                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary flex-grow-1">
                              Follow
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>