→ 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

528

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

mission and vission
je copy korbe se chor

Author:
Fitar Ahmed

2 months ago

337

v.4.6
Personal Portfolio Service Section

Author:
Creative Araf

1 month ago

202

v.5.3
slider card product

Author:
Juan Antonio González Hernández

4 months ago

745

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

1 week ago

64

v.5.3
contact page

Author:
Md. Hasibur Rahman

1 month ago

129

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

Author:
Ranadhir Debnath

1 year ago

3.6k

v.5.3
Special Skills

Author:
Shahriar Noyon

2 months ago

308

v.4.6
Work Experience Section

Author:
Shahriar Noyon

2 months ago

321

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.3k

v.4.6
existing client section
do noy copy

Author:
Fitar Ahmed

2 months ago

294

v.4.6
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

2 months ago

252

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

2 months ago

433

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent