Bootstrap testimonial snipp example v26
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 {
box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
border: 1px solid rgba(164,174,198,.2);
border-radius: .4rem;
}
.card-body {
flex: 1 1 auto;
padding: 2rem 2rem;
}
.ratings {
display: inline-block;
position: relative;
width: 5rem;
height: 0.8rem;
}
.ratings:after {
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: 400;
font-size: .9rem;
line-height: 1;
position: absolute;
top: 0;
left: 0;
color: #fcc032;
content: "26052605260526052605";
overflow: hidden;
}
.w-12 {
width: 3.5rem!important;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row mb-4">
<div class="col-9 mx-auto text-center">
<h2 class="small text-uppercase text-muted mb-3">Happy Customers</h2>
<h3 class="display-5 mb-5">Don't take our word for it. See what customers are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">"This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" >
<div class="ps-3">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" >
<div class="ps-3">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">“Fusce dapibus, justo sit amet. Vivamus faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" >
<div class="ps-3">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">“Fusce dapibus, justo sit amet. Vivamus faucibus dolor auctor. dapibus, justo sit amet. Vivamus faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" >
<div class="ps-3">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">“Fusce dapibus justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" >
<div class="ps-3">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body"> <span class="ratings five mb-3"></span>
<p class="card-text mt-3 mb-5 lead">"This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."</p>
<div class="d-flex align-items-center"> <img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" >
<div class="ps-3">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" ></script>
</body>
</html>
jsfiddle example
