Testimonials is a section where brand owner put the reviews of their services or product given by their users. Having this section website increase the trust level of new users. But how you show the testimonial on the page is huge impact too.
It's very important to show the reviews or testimonials in ways which looks clean, easy to read and apealing at the same time. Bootstrap rev is here with few Testimonial components to boot your website design work.
Static 3 column card tooltip design for testimonials with user image, name and postion and obviously with detailed review.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
John Doe
CEO at abc Corporation
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
John Doe
CEO at abc Corporation
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
John Doe
CEO at abc Corporation
<section>
<div class="container">
<ul class="testimonial-wrapper">
<li>
<div class="testimonial-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
</p>
</div>
<div class="testimonial-raw">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/icons/stackoverflow.svg" alt="" class="img-fluid">
</div>
<p class="font-600">
John Doe
</p>
<p class="fs-7">
CEO at abc Corporation
</p>
</div>
</li>
<li>
<div class="testimonial-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
</p>
</div>
<div class="testimonial-raw">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/icons/stackoverflow.svg" alt="" class="img-fluid">
</div>
<p class="font-600">
John Doe
</p>
<p class="fs-7">
CEO at abc Corporation
</p>
</div>
</li>
<li>
<div class="testimonial-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cumque in enim ad aliquam quasi alias! Vel et repudiandae commodi voluptatem iure, nam laboriosam tempore, dolore consequuntur harum accusantium dolorum?
</p>
</div>
<div class="testimonial-raw">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/icons/stackoverflow.svg" alt="" class="img-fluid">
</div>
<p class="font-600">
John Doe
</p>
<p class="fs-7">
CEO at abc Corporation
</p>
</div>
</li>
</ul>
</div>
</section>
We are using Two transition slider to show our testimonials here in which image, name and position will be on the right side of the slider and detialed review will be on left side. You can find Next and Previous button at the bottom to go forward or backward to read old or new reviews.
Note: This section is using JS don't forget to include it in the footer or js file of your project.
<section>
<div class="container">
<div class="two-slide-wrapper slide-testimonial-wrapper">
<div class="row align-items-center">
<div class="col-md-3 image-wrapper">
<div id="testimonialmix2" class="carousel testimonialmix2 carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://bootstraprev.com/img/blocks/icons/stackoverflow.svg" alt="" class="img-fluid">
<div class="by">
<p class="font-600">
John Doe
</p>
<p class="fs-7">
Vice President
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://bootstraprev.com/img/blocks/icons/slack.svg" alt="" class="img-fluid">
<div class="by">
<p class="font-600">
John Doe
</p>
<p class="fs-7">
Vice President
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 content-wrapper">
<div id="testimonialmix2" class="carousel testimonialmix2 slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora quo expedita nulla animi, ut quisquam maxime doloribus mollitia odit provident, dicta. Labore distinctio repudiandae, odio in voluptatem velit libero eaque.
</p>
</div>
<div class="carousel-item">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora quo expedita nulla animi, ut quisquam maxime doloribus mollitia odit provident, dicta. Labore distinctio repudiandae, odio in voluptatem velit libero eaque.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="next"><i class="bi bi-chevron-right"></i></a>
<a class="previous"><i class="bi bi-chevron-left"></i></a>
</div>
</div>
</section>
$('.next').on('click', function(e) {
e.preventDefault()
$('.testimonialmix2').carousel('next')
})
$('.previous').on('click', function(e) {
e.preventDefault()
$('.testimonialmix2').carousel('prev')
})
This is almost simmilar to the testimonial single slider the only difference is we are using bigger image on the right side and full review on the left side followed by name and positon.
Note: This section is using JS don't forget to include it in the footer or js file of your project.
<section>
<div class="container">
<div class="two-slide-wrapper testimonial-big-wrapper">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<div class="row align-items-center">
<div class="col-md-8 content-wrapper">
<div id="testimonialbigmix2" class="carousel testimonialbigmix2 slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>
We had an incredible experience working with <b>Bootstrap Rev</b> and were impressed they made such a big difference in only three weeks. Our team is so grateful for the wonderful improvements they made and their ability to get familiar with the product concept so quickly. It acted as a catalyst to take our design to the next level and get more eyes on our product.
</p>
<div class="by">
<p class="font-500 mb-1 text-primary mt-5">
Scarlett Johansson
</p>
<p class="fs-7">
CEO at Xion
</p>
</div>
</div>
<div class="carousel-item">
<p>
We had an incredible experience working with <b>Bootstrap Rev</b> and were impressed they made such a big difference in only three weeks. Our team is so grateful for the wonderful improvements they made and their ability to get familiar with the product concept so quickly. It acted as a catalyst to take our design to the next level and get more eyes on our product.
</p>
<div class="by">
<p class="font-500 mb-1 text-primary mt-5">
Scarlett Johansson
</p>
<p class="fs-7">
CEO at Xion
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 image-wrapper">
<div id="testimonialbigmix2" class="carousel testimonialbigmix2 carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://bootstraprev.com/img/blocks/testimonial/testimonial1.jpg" alt="" class="img-fluid">
</div>
<div class="carousel-item">
<img src="https://bootstraprev.com/img/blocks/testimonial/testimonial2.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<a class="next"><i class="bi bi-chevron-right"></i></a>
<a class="previous"><i class="bi bi-chevron-left"></i></a>
</div>
</div>
</section>
$('.next').on('click', function(e) {
e.preventDefault()
$('.testimonialbigmix2').carousel('next')
})
$('.previous').on('click', function(e) {
e.preventDefault()
$('.testimonialbigmix2').carousel('prev')
})
Review Slider Tooltip is using bootstrap caraousel to show the reviews in which we have used image in the Carousel Indicators along with Name and postion. The name and position will be visible only for the active review.
<section>
<div class="container">
<div id="TestimonialTool" class="carousel slide testimonial-tooltip-wrapper" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="testimonial-caption-wrapper">
<div class="icon mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
<div class="carousel-item">
<div class="testimonial-caption-wrapper">
<div class="icon mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-bs-target="#TestimonialTool" data-bs-slide-to="0" class="active" style="background: url(https://bootstraprev.com/img/blog/admin.jpg)">
<div class="testimonial-tooltip">
<p class="font-500">
John Doe
</p>
<p class="fs-7">
CEO of XYZ
</p>
</div>
</li>
<li data-bs-target="#TestimonialTool" data-bs-slide-to="1" style="background: url(https://bootstraprev.com/img/blog/admin.jpg)">
<div class="testimonial-tooltip">
<p class="font-500">
John Doe
</p>
<p class="fs-7">
CEO of XYZ
</p>
</div>
</li>
</ol>
</div>
</div>
</section>
This is static asmetric Testimonial Grid to give this section a creative and out of the box look. In this section you can find logo from where review has been imported.
Get inspired by these stories.
To quickly start my startup landing page design, I was looking for a landing page UI Kit. Landify is one of the best landing page UI kit I have come across. It’s so flexible, well organised and easily editable.
John Doe
Vice President, GoPro
I used landify and created a landing page for my startup within a week. The Landify UI Kit is simple and highly intuitive, so anyone can use it.
John Doe
Vice President, GoPro
Landify saved our time in designing my company page.
John Doe
Vice President, GoPro
<section>
<div class="container">
<div class="row flex-testimonial-wrapper">
<div class="col-md-6 d-flex flex-column align-items-end">
<div class="headline">
<h1>
Real Stories from Real Customers
</h1>
<p class="fs-7">
Get inspired by these stories.
</p>
</div>
<div class="testimonial-card" style="max-width: 80%">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/hubspot.svg" alt="" class="img-fluid">
</div>
<div class="review-content-wrapper d-flex">
<div class="icon mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<div class="review-content">
<p>
To quickly start my startup landing page design, I was looking for a landing page UI Kit. Landify is one of the best landing page UI kit I have come across. It’s so flexible, well organised and easily editable.
</p>
<p class="mt-4 font-500">
John Doe
</p>
<p class="fs-7">
Vice President, GoPro
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex flex-column align-items-start">
<div class="testimonial-card">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/microsoft.svg" alt="" class="img-fluid">
</div>
<div class="review-content-wrapper d-flex">
<div class="icon mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<div class="review-content">
<p>
I used landify and created a landing page for my startup within a week. The Landify UI Kit is simple and highly intuitive, so anyone can use it.
</p>
<p class="mt-4 font-500">
John Doe
</p>
<p class="fs-7">
Vice President, GoPro
</p>
</div>
</div>
</div>
<div class="testimonial-card" style="max-width: 70%">
<div class="thumb">
<img src="https://bootstraprev.com/img/blocks/google.svg" alt="" class="img-fluid">
</div>
<div class="review-content-wrapper d-flex">
<div class="icon mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
</div>
<div class="review-content">
<p>
Landify saved our time in designing my company page.
</p>
<p class="mt-4 font-500">
John Doe
</p>
<p class="fs-7">
Vice President, GoPro
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>