→ 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

186

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 component using Bootstrap 5

Author:
Mateo Rojas

1 year ago

3k

v.5.3
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

2 years ago

5k

v.5.3
Mission & Vision Section

Author:
Shahriar Noyon

1 month ago

292

v.4.6
Special Skills

Author:
Shahriar Noyon

1 month ago

215

v.4.6
Portfolio page

Author:
sajid taz

6 days ago

726

v.4.6
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

2.2k

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

Author:
Prajwal Hallale

2 years ago

9.2k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

3.3k

v.4.6
Category Tab

Author:
java stories story

9 months ago

1.5k

v.5.3
skill info

Author:
Gana JNsksk

1 month ago

222

v.4.6
Training & Certifications Section

Author:
Shahriar Noyon

1 month ago

218

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

Author:
Juan Martinez

1 year ago

18.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent