→ 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

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

Personal Info Section

Author:
Tanvir fahad

3 weeks ago

78

v.4.6
Our Clients

Author:
Gana JNsksk

3 weeks ago

73

v.4.6
serviceComplate

Author:
Sahin Miah

3 weeks ago

93

v.4.6
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

11 months ago

901

v.4.6
Work Experience Section

Author:
Shahriar Noyon

3 weeks ago

54

v.4.6
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.5k

v.4.6
Product Card with Modal

Author:
java stories story

9 months ago

2.2k

v.5.3
test

Author:
Anonymous

3 months ago

274

v.5.3
Education Information Section

Author:
Shahriar Noyon

3 weeks ago

45

v.4.6
my purpose

Author:
Gana JNsksk

4 weeks ago

70

v.4.6
Category Tab

Author:
java stories story

9 months ago

1.3k

v.5.3
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

3 weeks ago

71

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent