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
![](https://mdbcdn.b-cdn.net/img/new/avatars/2.webp)
<img
src="https://mdbootstrap.com/img/new/avatars/2.webp"
class="rounded-circle"
style="width: 150px;"
alt=""
/>
With shadows
![](https://mdbcdn.b-cdn.net/img/new/avatars/1.webp)
<img
src="https://mdbootstrap.com/img/new/avatars/1.webp"
class="rounded-circle shadow-4"
style="width: 150px;"
alt=""
/>
Square
![](https://mdbcdn.b-cdn.net/img/new/avatars/5.webp)
<img
src="https://mdbootstrap.com/img/new/avatars/5.webp"
class="rounded-3"
style="width: 150px;"
alt=""
/>
With content
![](https://mdbcdn.b-cdn.net/img/new/avatars/8.webp)
John Doe
Web designer
<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>
Carousel
<!-- 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
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.
![](https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp)
Maria Smantha
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.
![](https://mdbootstrap.com/img/Photos/Avatars/img%20(2).webp)
Lisa Cudrow
Neque cupiditate assumenda in maiores repudi mollitia architecto.
![](https://mdbootstrap.com/img/Photos/Avatars/img%20(9).webp)
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).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
![Generic placeholder image](https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp)
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.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>