→ Sofia Petrova
→ Testimonial

Testimonial

with auto-scrolling testimonial cards

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: Testimonial

Author Sofia Petrova

8.5k

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container py-5">
        <h2 class="text-center mb-5">What Our Clients Say</h2>
        <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">
                        <div class="testimonial-content p-4">
                            <div class="d-flex justify-content-between mb-4">
                                <div class="d-flex align-items-center">
                                    <img src="https://i.pravatar.cc/150?img=1" alt="Client 1" class="testimonial-image me-3">
                                    <div>
                                        <h5 class="mb-0">Sarah Johnson</h5>
                                        <p class="text-muted mb-0">Marketing Director</p>
                                    </div>
                                </div>
                                <i class="bi bi-quote quote-icon"></i>
                            </div>
                            <p class="mb-0">This product has revolutionized our workflow. The intuitive interface and
                                powerful features have significantly boosted our team's productivity. I can't imagine
                                our business without it now!</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="testimonial-card p-4">
                        <div class="testimonial-content p-4">
                            <div class="d-flex justify-content-between mb-4">
                                <div class="d-flex align-items-center">
                                    <img src="https://i.pravatar.cc/150?img=11" alt="Client 2" class="testimonial-image me-3">
                                    <div>
                                        <h5 class="mb-0">Michael Chen</h5>
                                        <p class="text-muted mb-0">Software Engineer</p>
                                    </div>
                                </div>
                                <i class="bi bi-quote quote-icon"></i>
                            </div>
                            <p class="mb-0">As a developer, I appreciate the clean code and excellent documentation.
                                This tool has made my job easier and allowed me to focus on creating value for our
                                customers. Highly recommended!</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="testimonial-card p-4">
                        <div class="testimonial-content p-4">
                            <div class="d-flex justify-content-between mb-4">
                                <div class="d-flex align-items-center">
                                    <img src="https://i.pravatar.cc/150?img=5" alt="Client 3" class="testimonial-image me-3">
                                    <div>
                                        <h5 class="mb-0">Emily Rodriguez</h5>
                                        <p class="text-muted mb-0">UX Designer</p>
                                    </div>
                                </div>
                                <i class="bi bi-quote quote-icon"></i>
                            </div>
                            <p class="mb-0">The attention to detail in the user experience is outstanding. This product
                                not only looks beautiful but also functions flawlessly. It's a joy to use and has become
                                an essential part of my design process.</p>
                        </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>
    </div>

</div>

More Examples

Modern Testimonial Carousel

Author:
Anonymous

1 year ago

3.5k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

2 years ago

2.7k

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

Author:
Sofia Petrova

2 years ago

4.2k

v.5.3
Customer testimonials
modern and clean customer review section

Author:
Anonymous

1 year ago

4.6k

v.5.3
Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

1 year ago

1.8k

v.5.3
Minimal testimonial section
With user images

Author:
Noah Kim

2 years ago

5.2k

v.5.3
Testimonial carousel

Author:
Anonymous

1 year ago

1.8k

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

2 years ago

3.5k

v.5.3
Responsive Testimonials

Author:
Anonymous

2 years ago

1.8k

v.5.3
Testimonial

Author:
DOLA AKTER

2 months ago

270

v.4.6
Simple Login form

Author:
Prajwal Hallale

2 years ago

9.8k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

8.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent