→ Huryra
→ client feedback

client feedback

This bootstrap css example is contributed by Huryra, on 22-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author Huryra

v.4.6

Fork Fullscreen

<section class="py-5 bg-light">
    <div class="container">
        
        <div class="text-center mb-5">
            <h2 class="fw-bold">What Our Clients Say</h2>
            <p class="text-muted">
                Hear from our satisfied clients about their experience.
            </p>
        </div>

<div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="mb-3 text-warning">
                            ★★★★★
                        </div>
                        <p class="card-text">
                            "Excellent service and great communication throughout the project. Highly recommended!"
                        </p>
                    </div>
                    <div class="card-footer bg-white border-0 d-flex align-items-center">
                        <img src="https://via.placeholder.com/50"
                             class="rounded-circle me-3"
                             alt="Client">
                        <div>
                            <h6 class="mb-0">John Smith</h6>
                            <small class="text-muted">CEO, Tech Solutions</small>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="mb-3 text-warning">
                            ★★★★★
                        </div>
                        <p class="card-text">
                            "The team exceeded our expectations and delivered the project on time."
                        </p>
                    </div>
                    <div class="card-footer bg-white border-0 d-flex align-items-center">
                        <img src="https://via.placeholder.com/50"
                             class="rounded-circle me-3"
                             alt="Client">
                        <div>
                            <h6 class="mb-0">Sarah Johnson</h6>
                            <small class="text-muted">Marketing Manager</small>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="mb-3 text-warning">
                            ★★★★★
                        </div>
                        <p class="card-text">
                            "Professional, reliable, and easy to work with. Great experience overall."
                        </p>
                    </div>
                    <div class="card-footer bg-white border-0 d-flex align-items-center">
                        <img src="https://via.placeholder.com/50"
                             class="rounded-circle me-3"
                             alt="Client">
                        <div>
                            <h6 class="mb-0">Michael Brown</h6>
                            <small class="text-muted">Business Owner</small>
                        </div>
                    </div>
                </div>
            </div>

</div>

</div>
</section>

More Examples

Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

2 months ago

384

v.5.3
home_all_contant

Author:
Sahin Miah

3 months ago

966

v.4.6
Personal Portfolio About Section

Author:
Creative Araf

1 month ago

235

v.5.3
portfolio

Author:
Ad Apon7

3 months ago

320

v.4.6
Skills Information section

Author:
Ad Apon7

2 months ago

698

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

1 year ago

1.5k

v.5.3
Personal Biography section

Author:
Ad Apon7

2 months ago

579

v.5.3
marquee track

Author:
Juan Antonio González Hernández

5 months ago

854

v.4.6
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.4k

v.4.6
Hero Parallaxx

Author:
java stories story

10 months ago

2.9k

v.5.3
slider

Author:
Ad Apon7

3 months ago

854

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

1 year ago

3.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent