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

HTML


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

With shadows

HTML


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

Square

HTML


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

With content

John Doe

Web designer

HTML


          <img
            src="https://mdbootstrap.com/img/new/avatars/8.webp"
            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

HTML


          <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).webp"
                      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>

Carousel

Maria Kate

Photographer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.

John Doe

Web Developer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis.

Anna Deynah

UX Designer

HTML


          <!-- Carousel wrapper -->
          <div
            id="carouselExampleControls"
            class="carousel slide text-center carousel-dark"
            data-mdb-ride="carousel"
          >
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img
                  class="rounded-circle shadow-1-strong mb-4"
                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp"
                  alt="avatar"
                  style="width: 150px;"
                />
                <div class="row d-flex justify-content-center">
                  <div class="col-lg-8">
                    <h5 class="mb-3">Maria Kate</h5>
                    <p>Photographer</p>
                    <p class="text-muted">
                      <i class="fas fa-quote-left pe-2"></i>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
                      nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia
                      fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit
                      doloremque.
                    </p>
                  </div>
                </div>
                <ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="far fa-star fa-sm"></i></li>
                </ul>
              </div>
              <div class="carousel-item">
                <img
                  class="rounded-circle shadow-1-strong mb-4"
                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).webp"
                  alt="avatar"
                  style="width: 150px;"
                />
                <div class="row d-flex justify-content-center">
                  <div class="col-lg-8">
                    <h5 class="mb-3">John Doe</h5>
                    <p>Web Developer</p>
                    <p class="text-muted">
                      <i class="fas fa-quote-left pe-2"></i>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
                      nesciunt sint eligendi reprehenderit reiciendis.
                    </p>
                  </div>
                </div>
                <ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="far fa-star fa-sm"></i></li>
                </ul>
              </div>
              <div class="carousel-item">
                <img
                  class="rounded-circle shadow-1-strong mb-4"
                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp"
                  alt="avatar"
                  style="width: 150px;"
                />
                <div class="row d-flex justify-content-center">
                  <div class="col-lg-8">
                    <h5 class="mb-3">Anna Deynah</h5>
                    <p>UX Designer</p>
                    <p class="text-muted">
                      <i class="fas fa-quote-left pe-2"></i>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
                      nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia
                      fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit
                      doloremque.
                    </p>
                  </div>
                </div>
                <ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="fas fa-star fa-sm"></i></li>
                  <li><i class="far fa-star fa-sm"></i></li>
                </ul>
              </div>
            </div>
            <button
              class="carousel-control-prev"
              type="button"
              data-mdb-target="#carouselExampleControls"
              data-mdb-slide="prev"
            >
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              data-mdb-target="#carouselExampleControls"
              data-mdb-slide="next"
            >
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
          <!-- Carousel wrapper -->

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.

HTML
CSS


          <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).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://mdbootstrap.com/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://mdbootstrap.com/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

Danny McLoan

Senior Journalist

Articles

Followers

976

Rating

8.5

HTML


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