→ Gana JNsksk
→ our services

our services

This bootstrap css example is contributed by Gana JNsksk, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Gana JNsksk

561

v.4.6

Fork Fullscreen

<section>
        <div class="container py-5">
            
            <div class="text-center mb-5">
                <h2 class="section-title d-inline-block">Our Services</h2>
                <p class="text-muted mt-2">We provide high-quality digital solutions for your business</p>
            </div>

<div class="row g-4">

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-code-square service-icon"></i>
                        <h5 class="fw-semibold">Web Development</h5>
                        <p class="text-muted mt-2">Custom, responsive and modern websites built with latest
                            technologies.
                        </p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service1">
                            View Details
                        </button>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-phone service-icon"></i>
                        <h5 class="fw-semibold">Mobile App Development</h5>
                        <p class="text-muted mt-2">Native and cross-platform mobile applications for Android & iOS.</p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service2">
                            View Details
                        </button>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-palette service-icon"></i>
                        <h5 class="fw-semibold">UI/UX Design</h5>
                        <p class="text-muted mt-2">Beautiful, user-friendly and intuitive interface designs.</p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service3">
                            View Details
                        </button>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-search service-icon"></i>
                        <h5 class="fw-semibold">SEO & Digital Marketing</h5>
                        <p class="text-muted mt-2">Improve your online visibility and drive quality traffic.</p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service4">
                            View Details
                        </button>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-graph-up service-icon"></i>
                        <h5 class="fw-semibold">Business Analytics</h5>
                        <p class="text-muted mt-2">Data-driven insights and reporting solutions for your business.</p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service5">
                            View Details
                        </button>
                    </div>
                </div>

<div class="col-md-6 col-lg-4">
                    <div class="card service-card h-100 text-center p-4">
                        <i class="bi bi-shield-lock service-icon"></i>
                        <h5 class="fw-semibold">Cyber Security</h5>
                        <p class="text-muted mt-2">Protect your digital assets with advanced security solutions.</p>
                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal"
                            data-bs-target="#service6">
                            View Details
                        </button>
                    </div>
                </div>

</div>
        </div>

<div class="modal fade" id="service1" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold">Web Development</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted">We create fast, secure, and responsive websites tailored to your business
                            needs.</p>
                        <ul class="list-unstyled mt-4">
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Custom Website
                                Development
                            </li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>E-commerce Solutions
                            </li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>CMS Development
                                (WordPress,
                                etc.)</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Maintenance & Support
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Get Quote</button>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="service2" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold">Mobile App Development</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted">High-performance mobile applications for Android and iOS platforms.</p>
                        <ul class="list-unstyled mt-4">
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Native & Flutter Apps
                            </li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>UI/UX Optimized Design
                            </li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>App Store Submission
                            </li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Regular Updates &
                                Maintenance</li>
                        </ul>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Get Quote</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

More Examples

Agriculture Website for Live project_WDD

Author:
Anonymous

3 months ago

440

v.4.6
Personal Info Section

Author:
Tanvir fahad

4 months ago

390

v.4.6
Services part

Author:
istiakahmedchowdhury10

2 months ago

109

v.4.6
Mission & Vision Section

Author:
Shahriar Noyon

4 months ago

692

v.4.6
contact

Author:
lamiajahan

2 months ago

134

v.4.6
About Page for WDD

Author:
sajid taz

3 months ago

355

v.4.6
Portfolio

Author:
DOLA AKTER

4 months ago

310

v.4.6
skill info

Author:
Gana JNsksk

4 months ago

364

v.4.6
service list
do not copy

Author:
Fitar Ahmed

4 months ago

822

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

Author:
Prajwal Hallale

2 years ago

9.7k

v.5.3
E-Commerce Cart Section

Author:
Creative Araf

2 months ago

265

v.5.3
product list

Author:
java stories story

1 year ago

3.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent