→ Anonymous
→ Testimonial carousel

Testimonial carousel

This bootstrap css example is contributed by Anonymous, on 20-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are endorsement,review

Tags: Testimonial

Author Anonymous

157

v.5.3

Fork Fullscreen

<div class="container py-5">
    <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 position-relative">
                            <div class="quote-icon">❝</div>
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center">
                                    <img src="https://randomuser.me/api/portraits/women/64.jpg" class="avatar mb-3" alt="Client Avatar">
                                    <h5 class="client-name mb-1">Sarah Johnson</h5>
                                    <p class="client-position">Creative Director</p>
                                </div>
                                <div class="col-md-8">
                                    <p class="testimonial-text">"The attention to detail and the level of creativity
                                        they brought to our project was extraordinary. The team's dedication to
                                        excellence made all the difference in achieving our goals."</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="testimonial-card position-relative">
                            <div class="quote-icon">❝</div>
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center">
                                    <img src="https://randomuser.me/api/portraits/men/64.jpg" class="avatar mb-3" alt="Client Avatar">
                                    <h5 class="client-name mb-1">Michael Chen</h5>
                                    <p class="client-position">Tech Lead</p>
                                </div>
                                <div class="col-md-8">
                                    <p class="testimonial-text">"Working with this team has been an absolute pleasure.
                                        Their innovative approach and technical expertise helped us transform our vision
                                        into reality."</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="testimonial-card position-relative">
                            <div class="quote-icon">❝</div>
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center">
                                    <img src="https://randomuser.me/api/portraits/women/64.jpg" class="avatar mb-3" alt="Client Avatar">
                                    <h5 class="client-name mb-1">Emma Davis</h5>
                                    <p class="client-position">Product Manager</p>
                                </div>
                                <div class="col-md-8">
                                    <p class="testimonial-text">"The results exceeded our expectations. Their commitment
                                        to quality and timeline management made them stand out from other partners we've
                                        worked with."</p>
                                </div>
                            </div>
                        </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"></button>
                    <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

1 month ago

169

v.5.3
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

6 months ago

955

v.5.3
Testimonial carousel

Author:
Sofia Petrova

6 months ago

491

v.5.3
Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

6 months ago

547

v.5.3
Customer testimonials
modern and clean customer review section

Author:
Anonymous

1 month ago

342

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

10 months ago

443

v.5.3
Responsive Testimonials

Author:
Anonymous

5 months ago

395

v.5.3
Modern Testimonial Carousel

Author:
Anonymous

3 months ago

289

v.5.3
Minimal testimonial section
With user images

Author:
Noah Kim

6 months ago

451

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

9 months ago

521

v.3.4
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

4 months ago

598

v.4.6
Login with google button bootstrap
Sign in with the Google button

Author:
Omar Khaled

5 months ago

1.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent