→ 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

603

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