→ 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

247

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

Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

2 years ago

7.5k

v.5.3
Special Skills

Author:
Shahriar Noyon

1 month ago

229

v.4.6
working

Author:
Gana JNsksk

1 month ago

222

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

1 week ago

40

v.5.3
test

Author:
Anonymous

4 months ago

303

v.5.3
Expanding Cards Horizontal

Author:
Juan Antonio González Hernández

4 months ago

672

v.4.6
contact from
do not copy

Author:
Fitar Ahmed

1 month ago

725

v.4.6
service list
do not copy

Author:
Fitar Ahmed

1 month ago

731

v.4.6
Cart Hero Pro

Author:
Juan Antonio González Hernández

3 months ago

815

v.5.3
ss skill

Author:
Gana JNsksk

1 month ago

213

v.4.6
E-Commerce index

Author:
Creative Araf

1 week ago

52

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.7k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent