"bootstrap testimonials"
Bootstrap 4.1.1 Snippet by sufe01

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script></head> <div class="container"> <div class="row"> <section id="testimonials"> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"> <div class="carousel-indicators"> <button style="display:none" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button style="display:none" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <!-- <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> --> </div> <div class="carousel-inner"> <div class="carousel-item active"> <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2> <img class="testimonials-img" src="https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif" alt="dog-profile"> <em>Pebbles, New York</em> </div> <div class="carousel-item"> <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2> <img class="testimonials-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQTYwmryt_tuYQ6QE1Z2zudWtHRUq80Ih1Cw&usqp=CAU" alt="lady-profile"> <em>Beverly, Illinois</em> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-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-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> </div> </div> </html>
#testimonials{ padding: 7% 15%; text-align: center; background: #ef8172; color: #fff; } #testimonials h2{ font-weight: bold; font-size: 3rem; line-height: 1.5; } .testimonials-img{ width: 10%; height:20%; border-radius: 100%; margin: 20px; } #press{ background: #ef8172; padding-bottom: 3%; text-align: center; } .press-logo{ width: 15%; margin: 20px 20px 50px; }

Related: See More

Paper Kit 2
Responsive simple Testimonials
Testimonials Based on Bootstrap's 6 primary colors.
Testimonials with Carousel

Questions / Comments: