Bootstrap testimonial snipp example v20
Whole html/css code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Testimonial snipp</title>
<style>
.card {
border: 0;
border-radius: .4rem;
}
.bg-pale-yellow {
background-color: #fef3e4!important;
}
.bg-pale-red {
background-color: #fae6e7!important;
}
.bg-pale-leaf {
background-color: #eaf3ef!important;
}
.bg-pale-blue {
background-color: #e0e9fa!important;
}
.card-body {
flex: 1 1 auto;
padding: 2rem 2rem;
}
blockquote.icon {
position: relative;
border: 0;
padding: 0;
}
blockquote.icon:before {
content: "201d";
position: absolute;
top: -1.5rem;
left: -.9rem;
color: rgba(52,63,82,.05);
font-size: 10rem;
line-height: 1;
z-index: 1;
}
</style>
</head>
<body>
<div class="container pt-5 pb-5">
<div class="row gy-5 align-items-center">
<div class="col-lg-7">
<div class="row gy-5">
<div class="col-md-6 col-xl-5 align-self-end">
<div class="card bg-pale-yellow">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Cum sociis natoque penatibus et magnis dis parturient montes.”</p>
<div class="blockquote-details">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<div class="card bg-pale-red">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.”</p>
<div class="blockquote-details">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-5 offset-xl-1">
<div class="card bg-pale-leaf">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.”</p>
<div class="blockquote-details">
<h5 class="mb-1">Barclay Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 align-self-start">
<div class="card bg-pale-blue">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.”</p>
<div class="blockquote-details">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="display-4 mb-3">Our Community</h2>
<p class="lead fs-lg">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.</p>
<a href="#" class="btn btn-primary rounded-pill mt-3 px-4 py-2">View More</a> </div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--------------------------------------Testimonial one section ends here------------------------------->
</body>
</html>
jsfiddle example
