→ sajid taz
→ Service Section for WDD

Service Section for WDD

This bootstrap css example is contributed by sajid taz, on 12-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author sajid taz

276

v.4.6

Fork Fullscreen

<section class="py-5 bg-light text-center">
        <div class="container">
            <h1 class="display-4 fw-bold">Services</h1>
            <p class="text-muted">Professional solutions tailored to your needs</p>
        </div>
    </section>

<section class="py-5 bg-dark text-light">
        <div class="container">

<div class="text-center mb-5">
                <h2 class="fw-bold">Our Services</h2>
                <p class="text-secondary">
                    Explore the services we offer to help your business grow.
                </p>
            </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-laptop fs-1 text-primary"></i>
                        <h5 class="mt-3">Web Design</h5>
                        <p>Modern and responsive website design.</p>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-code-slash fs-1 text-success"></i>
                        <h5 class="mt-3">Web Development</h5>
                        <p>Custom websites using modern technologies.</p>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-palette fs-1 text-danger"></i>
                        <h5 class="mt-3">UI/UX Design</h5>
                        <p>Clean and user-friendly interface design.</p>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-bar-chart fs-1 text-warning"></i>
                        <h5 class="mt-3">Data Analytics</h5>
                        <p>Data-driven insights and reporting solutions.</p>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-shield-check fs-1 text-info"></i>
                        <h5 class="mt-3">Cyber Security</h5>
                        <p>Protecting digital assets and information.</p>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow border-0 p-4 text-center bg-light text-dark">
                        <i class="bi bi-headset fs-1 text-secondary"></i>
                        <h5 class="mt-3">Support Service</h5>
                        <p>Dedicated support and maintenance services.</p>
                    </div>
                </div>

</div>

</div>
    </section>

<section class="py-5 bg-light">
        <div class="container">

<div class="text-center mb-5">
                <h2 class="fw-bold">Our Clients</h2>
                <p class="text-muted">
                    Trusted by leading companies and organizations.
                </p>
            </div>

<div class="col-6 col-md-3">
                    <div class="card p-4 text-center shadow-sm">
                        <i class="bi bi-building fs-1 text-primary"></i>
                        <h6 class="mt-3">TechVision Ltd</h6>
                    </div>
                </div>

<div class="col-6 col-md-3">
                    <div class="card p-4 text-center shadow-sm">
                        <i class="bi bi-hospital fs-1 text-danger"></i>
                        <h6 class="mt-3">MediCare Hospital</h6>
                    </div>
                </div>

<div class="col-6 col-md-3">
                    <div class="card p-4 text-center shadow-sm">
                        <i class="bi bi-shop fs-1 text-warning"></i>
                        <h6 class="mt-3">GreenMart</h6>
                    </div>
                </div>

</div>

</div>
    </section>

<div class="text-center mb-5 text-white">
                <h2 class="fw-bold">Frequently Asked Questions</h2>
                <p class="text-secondary">
                    Answers to common questions about our services.
                </p>
            </div>

<div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                            What services do you provide?
                        </button>
                    </h2>
                    <div id="faq1" class="accordion-collapse collapse show">
                        <div class="accordion-body">
                            We provide web design, development, UI/UX design,
                            data analytics, cybersecurity, and support services.
                        </div>
                    </div>
                </div>

<div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#faq2">
                            Do you build responsive websites?
                        </button>
                    </h2>
                    <div id="faq2" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            Yes, all websites are optimized for desktop,
                            tablet, and mobile devices.
                        </div>
                    </div>
                </div>

<div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#faq3">
                            How long does a project take?
                        </button>
                    </h2>
                    <div id="faq3" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            Project duration depends on complexity,
                            usually between 1 and 6 weeks.
                        </div>
                    </div>
                </div>

<div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#faq4">
                            Do you provide support after project delivery?
                        </button>
                    </h2>
                    <div id="faq4" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            Yes, we provide maintenance and support services
                            after project completion.
                        </div>
                    </div>
                </div>

<div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#faq5">
                            How can I contact you?
                        </button>
                    </h2>
                    <div id="faq5" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            You can contact us through the Contact page,
                            email, or social media platforms.
                        </div>
                    </div>
                </div>

</div>

</div>
    </section>

More Examples

Test

Author:
Anonymous

3 months ago

230

v.5.3
scroll animation image with title

Author:
Juan Antonio González Hernández

5 months ago

868

v.4.6
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4.6k

v.5.3
Card with background image

Author:
Nicholas

2 years ago

4.5k

v.4.6
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

2k

v.5.3
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

2 months ago

390

v.4.6
service list
do not copy

Author:
Fitar Ahmed

2 months ago

763

v.4.6
skill info

Author:
Gana JNsksk

2 months ago

305

v.4.6
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

2 years ago

9.5k

v.5.3
Portfolio

Author:
DOLA AKTER

2 months ago

250

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

3.9k

v.4.6
Restaurant Reservation section

Author:
Creative Araf

1 week ago

46

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent