Incorporating user testimonials into your website using Bootstrap 5 is an effective way to showcase positive feedback and build customer trust. With Bootstrap 5's flexible styling options, you can easily customize the appearance of testimonials to align with your brand's aesthetic while maintaining a professional look.
Approach
- Create the basic layout using HTML elements and integrate Bootstrap for styling using Bootstrap CDN Links.
- Testimonial cards are created using Bootstrap's card component within a row of columns. Each card contains an image, testimonial text, and user information structured using Bootstrap's list group component.
- Testimonial images are sourced from external URLs and displayed as rounded-circle images using Bootstrap's utility classes.
- The testimonial text and user information are enclosed within
<ul>elements with the classeslist-groupandbg-transparentto customize the appearance. - Testimonial details such as the testimonial text, user name, and occupation are provided as text content within
<li>elements with appropriate classes to style them accordingly.
Example: The example below shows how to create a dark-themed User testimonial in Bootstrap 5.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Dark Themed User Testimonial
with List Group
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.testimonial-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body class="bg-dark text-white pt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 mb-4">
<div class="card bg-secondary border-0
rounded-3 p-4 testimonial-card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240426035329/download.jpg"
class="card-img-top rounded-circle
mx-auto d-block"
alt="User Image">
<ul class="list-group
bg-transparent border-0">
<li class="list-group-item
bg-transparent border-0">
<p class="mb-0 text-white">
"GeeksforGeeks has been my go-to
platform for mastering computer
science concepts and enhancing
my coding skills. With its
vast array of tutorials,
coding challenges."
</p>
</li>
<li class="list-group-item bg-transparent
border-0 text-white
font-weight-bold">
Bishal Paul
</li>
<li class="list-group-item bg-transparent
border-0 text-white card-text
small">
Engineer, NIC
</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card bg-secondary border-0
rounded-3 p-4 testimonial-card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240426035200/7d34d9d53640af5cfd2614c57dfa7f13.jpg"
class="card-img-top rounded-circle
mx-auto d-block"
alt="User Image">
<ul class="list-group bg-transparent
border-0">
<li class="list-group-item
bg-transparent
border-0">
<p class="mb-0 text-white">
"I've found GeeksforGeeks
incredibly helpful for
improving my coding skills and
understanding complex algorithms."
</p>
</li>
<li class="list-group-item
bg-transparent border-0
text-white font-weight-bold">
Dino Kalita
</li>
<li class="list-group-item bg-transparent
border-0 text-white card-text
small">
Software Engineer
</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card bg-secondary
border-0 rounded-3
p-4 testimonial-card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240426035114/79dd11a9452a92a1accceec38a45e16a.jpg"
class="card-img-top rounded-circle
mx-auto d-block"
alt="User Image">
<ul class="list-group
bg-transparent
border-0">
<li class="list-group-item
bg-transparent
border-0">
<p class="mb-0 text-white">
"GeeksforGeeks provides top-notch
resources that have been
instrumental in my software
development journey."
</p>
</li>
<li class="list-group-item
bg-transparent
border-0 text-white
font-weight-bold">
Khogen Mahanta
</li>
<li class="list-group-item bg-transparent
border-0 text-white
card-text small">
Web Developer
</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card bg-secondary border-0
rounded-3 p-4 testimonial-card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240426034919/360_F_244438372_tqgUKRtdGk61Z6YuK79ufAhYpgXcB7xv.jpg"
class="card-img-top rounded-circle
mx-auto d-block"
alt="User Image">
<ul class="list-group
bg-transparent
border-0">
<li class="list-group-item
bg-transparent
border-0">
<p class="mb-0 text-white">
"GeeksforGeeks has been my
constant companion in
learning and implementing
new programming concepts."
</p>
</li>
<li class="list-group-item
bg-transparent border-0
text-white font-weight-bold">
Jublee Garg
</li>
<li class="list-group-item
bg-transparent border-0
text-white card-text
small">
Full Stack Developer
</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card bg-secondary border-0
rounded-3 p-4 testimonial-card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240426034805/360_F_244436923_vkMe10KKKiw5bjhZeRDT05moxWcPpdmb.jpg"
class="card-img-top rounded-circle
mx-auto d-block"
alt="User Image">
<ul class="list-group bg-transparent
border-0">
<li class="list-group-item
bg-transparent border-0">
<p class="mb-0 text-white">
"Thanks to GeeksforGeeks,
I've been able to tackle challenging
coding problems with ease."
</p>
</li>
<li class="list-group-item
bg-transparent
border-0 text-white
font-weight-bold">
Mark Zuckerberg
</li>
<li class="list-group-item
bg-transparent border-0
text-white card-text small">
Data Scientist
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Recommended Articles