→ 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

373

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

skill info

Author:
Gana JNsksk

5 months ago

407

v.4.6
skill section
do not copy please

Author:
Fitar Ahmed

5 months ago

1.3k

v.4.6
Client Feedback

Author:
Shahriar Noyon

5 months ago

526

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

3 months ago

385

v.5.3
Restaurant Reservation section

Author:
Creative Araf

3 months ago

240

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

3 months ago

795

v.5.3
Special Skills

Author:
Shahriar Noyon

5 months ago

481

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

4 months ago

553

v.4.6
Kategori Produk

Author:
java stories story

1 year ago

2.1k

v.5.3
Personal Info Section

Author:
Tanvir fahad

5 months ago

437

v.4.6
User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

1 year ago

3.8k

v.5.3
Services part

Author:
istiakahmedchowdhury10

3 months ago

170

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent