→ 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

2.1k

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

Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

1 year ago

1.5k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

1.3k

v.5.3
Minimal testimonial section
With user images

Author:
Noah Kim

1 year ago

2.1k

v.5.3
Responsive Testimonials

Author:
Anonymous

11 months ago

1k

v.5.3
Modern Testimonial Carousel

Author:
Anonymous

9 months ago

1.6k

v.5.3
Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

7 months ago

695

v.5.3
Carousel

Author:
Anonymous

1 year ago

1.1k

v.4.6
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

1 year ago

4.4k

v.5.3
Testimonial carousel

Author:
Anonymous

8 months ago

794

v.5.3
Customer testimonials
modern and clean customer review section

Author:
Anonymous

7 months ago

1.7k

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

1 year ago

2.1k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

10 months ago

1.7k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent