→ Sofia Petrova
→ Elegant testimonial carousel

Elegant testimonial carousel

Interactive testimonial carousel with user avatars

This bootstrap css example is contributed by Sofia Petrova, on 18-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are endorsement,review

Tags: Carousel Testimonial

Author Sofia Petrova

738

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container py-5">
        <h2 class="text-center mb-5">What Our Customers Say</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="testimonial-card p-4 p-md-5">
                                <i class="bi bi-quote quote-icon position-absolute top-0 start-0 mt-3 ms-3"></i>
                                <div class="text-center mb-4">
                                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="avatar mb-3">
                                    <h5 class="mb-1">Emma Thompson</h5>
                                    <p class="text-muted mb-0">Marketing Manager</p>
                                </div>
                                <p class="lead text-center mb-0">"This product has completely transformed our workflow.
                                    It's intuitive, powerful, and a joy to use every day. I can't imagine running our
                                    business without it now."</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial-card p-4 p-md-5">
                                <i class="bi bi-quote quote-icon position-absolute top-0 start-0 mt-3 ms-3"></i>
                                <div class="text-center mb-4">
                                    <img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar" class="avatar mb-3">
                                    <h5 class="mb-1">Michael Chen</h5>
                                    <p class="text-muted mb-0">Software Engineer</p>
                                </div>
                                <p class="lead text-center mb-0">"The level of customer support is outstanding. Whenever
                                    I've had a question or issue, the team has been quick to respond and always goes
                                    above and beyond to help."</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial-card p-4 p-md-5">
                                <i class="bi bi-quote quote-icon position-absolute top-0 start-0 mt-3 ms-3"></i>
                                <div class="text-center mb-4">
                                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Avatar" class="avatar mb-3">
                                    <h5 class="mb-1">Sophia Rodriguez</h5>
                                    <p class="text-muted mb-0">Small Business Owner</p>
                                </div>
                                <p class="lead text-center mb-0">"As a small business owner, I was hesitant to invest in
                                    new software, but this has paid for itself many times over. It's been a game-changer
                                    for my company's efficiency."</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" 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="#testimonialCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples