→ 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

Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

1 year ago

1.7k

v.4.6
Featured Product Card

Author:
Prajwal Hallale

2 years ago

3.1k

v.5.3
Personal Biography Section

Author:
Shahriar Noyon

3 weeks ago

101

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

2k

v.4.6
product list

Author:
java stories story

10 months ago

2.7k

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

1.9k

v.5.3
Work Experience Section

Author:
Tanvir fahad

3 weeks ago

75

v.4.6
About me section
je copy korbe she chor

Author:
Anonymous

3 weeks ago

69

v.4.6
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4.2k

v.5.3
Protfolio_page

Author:
Sahin Miah

3 weeks ago

97

v.4.6
Music speakers status

Author:
Jonathan

1 year ago

1k

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

Author:
Prajwal Hallale

1 year ago

9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent