→ 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

319

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

Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

2 years ago

20.5k

v.5.3
our services

Author:
Gana JNsksk

3 months ago

549

v.4.6
Our Clients

Author:
Shahriar Noyon

3 months ago

496

v.4.6
Music speakers status

Author:
Jonathan

1 year ago

1.2k

v.5.3
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

2 months ago

212

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

1 year ago

1.9k

v.4.6
contact us page
do not copy

Author:
Fitar Ahmed

4 months ago

802

v.4.6
Personal Biography Section

Author:
Shahriar Noyon

3 months ago

554

v.4.6
vulgh

Author:
Anonymous

1 month ago

211

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

Author:
Jimmy Mercury

1 year ago

2.1k

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4.7k

v.5.3
Profile
PHW

Author:
Delaino Barris (DB Graphic)

7 months ago

502

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent