→ Anonymous
→ Interactive Service Cards | Bootstrap 5....

Interactive Service Cards | Bootstrap 5.3

Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

This bootstrap css example is contributed by Anonymous, on 19-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Services,Why choose us

Tags: Feature showcase

Author Anonymous

7.1k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <div class="row g-4">
        
        <div class="col-md-4">
            <div class="service-card hover-lift">
                <div class="service-card-inner">
                    <div class="service-card-front">
                        <div class="icon-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                                class="bi bi-code-slash" viewBox="0 0 16 16">
                                <path
                                    d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z" />
                            </svg>
                        </div>
                        <h3 class="h4 mb-2">Web Development</h3>
                        <p class="text-center mb-0">Modern solutions for your digital presence</p>
                    </div>
                    <div class="service-card-back">
                        <h4 class="mb-3">Our Expertise</h4>
                        <ul class="feature-list">
                            <li>Custom Website Development</li>
                            <li>Responsive Design</li>
                            <li>Performance Optimization</li>
                            <li>SEO Integration</li>
                        </ul>
                        <button class="btn btn-primary mt-4">Learn More</button>
                    </div>
                </div>
            </div>
        </div>

<div class="col-md-4">
            <div class="service-card hover-lift">
                <div class="service-card-inner">
                    <div class="service-card-front">
                        <div class="icon-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                                class="bi bi-palette" viewBox="0 0 16 16">
                                <path
                                    d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
                                <path
                                    d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z" />
                            </svg>
                        </div>
                        <h3 class="h4 mb-2">UI/UX Design</h3>
                        <p class="text-center mb-0">Crafting beautiful user experiences</p>
                    </div>
                    <div class="service-card-back">
                        <h4 class="mb-3">Design Services</h4>
                        <ul class="feature-list">
                            <li>User Interface Design</li>
                            <li>User Experience Research</li>
                            <li>Prototyping</li>
                            <li>Design Systems</li>
                        </ul>
                        <button class="btn btn-primary mt-4">Learn More</button>
                    </div>
                </div>
            </div>
        </div>

<div class="col-md-4">
            <div class="service-card hover-lift">
                <div class="service-card-inner">
                    <div class="service-card-front">
                        <div class="icon-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                                class="bi bi-graph-up" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z" />
                            </svg>
                        </div>
                        <h3 class="h4 mb-2">Digital Marketing</h3>
                        <p class="text-center mb-0">Growth strategies that deliver results</p>
                    </div>
                    <div class="service-card-back">
                        <h4 class="mb-3">Marketing Solutions</h4>
                        <ul class="feature-list">
                            <li>SEO Optimization</li>
                            <li>Content Strategy</li>
                            <li>Social Media Marketing</li>
                            <li>Analytics & Reporting</li>
                        </ul>
                        <button class="btn btn-primary mt-4">Learn More</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Features Section
with icons

Author:
Anonymous

1 year ago

2.5k

v.5.3
Modern Service Cards Component With Icons

Author:
Alaric Sloane

1 year ago

2.7k

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

1 year ago

1.6k

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

1.7k

v.4.6
Features section

Author:
Juan Martinez

1 year ago

1.4k

v.5.3
Feature Cards
showcases three key features with a clean, minimal design.

Author:
Alaric Sloane

1 year ago

2.8k

v.5.3
Feature showcase cards

Author:
Mateo Rojas

1 year ago

1.3k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

1 year ago

3.7k

v.5.3
Features section
Showcase features with icons

Author:
Prajwal Hallale

1 year ago

1.3k

v.4.6
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

11 months ago

2.1k

v.4.6
Clean Commerce Cart Design
A sleek shopping cart interface with quantity controls and real-time order summary

Author:
Mason Ashford

1 year ago

5.2k

v.5.3
Sidebar navigation with toggle button

Author:
Moana silva

1 year ago

7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent