Avatar

Bootstrap Avatar - examples & tutorial

Responsive Avatar built with Bootstrap 5. Various templates like a circle avatar, square, inside the navbar, carousel, as a testimonial, profile and many more.

To learn more read Images Docs.


Basic example


          <img
            src="https://mdbootstrap.com/img/new/avatars/2.jpg"
            class="rounded-circle"
            style="width: 150px;"
            alt=""
          />
        

With shadows


          <img
            src="https://mdbootstrap.com/img/new/avatars/1.jpg"
            class="rounded-circle shadow-4"
            style="width: 150px;"
            alt=""
          />
        

Square


          <img
            src="https://mdbootstrap.com/img/new/avatars/5.jpg"
            class="rounded-3"
            style="width: 150px;"
            alt=""
          />
        

With content

John Doe

Web designer


          <img
            src="https://mdbootstrap.com/img/new/avatars/8.jpg"
            class="rounded-circle mb-3"
            style="width: 150px;"
            alt=""
          />

          <h5 class="mb-2"><strong>John Doe</strong></h5>
          <p class="text-muted">Web designer</p>
        

Inside the navbar


          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <ul class="navbar-nav">
                <!-- Avatar -->
                <li class="nav-item dropdown">
                  <a
                    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://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                      class="rounded-circle"
                      height="22"
                      alt=""
                      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

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.


          <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://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                      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://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                      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://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                      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

Generic placeholder image
Danny McLoan

Senior Journalist

Articles

41

Followers

976

Rating

8.5


          <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 text-black">
                        <div class="flex-shrink-0">
                          <img
                            src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-profiles/avatar-1.jpg"
                            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" style="color: #2b2a2a;">
                            Senior Journalist
                          </p>
                          <div
                            class="d-flex justify-content-start rounded-3 p-2 mb-2"
                            style="background-color: #efefef;"
                          >
                            <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" class="btn btn-outline-primary me-1 flex-grow-1">
                              Chat
                            </button>
                            <button type="button" class="btn btn-primary flex-grow-1">
                              Follow
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>