→ Alaric Sloane
→ Modern Service Cards Component With Icon...

Modern Service Cards Component With Icons

This bootstrap css example is contributed by Alaric Sloane, on 02-Nov-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 Alaric Sloane

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container py-5">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h1 class="display-4 text-gradient fw-bold">Our Services</h1>
                <p class="lead text-muted">Discover our range of innovative solutions designed to help your business grow</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card service-card shadow-sm h-100 p-4">
                    <div class="icon-circle gradient-custom mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-laptop" viewBox="0 0 16 16">
                            <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5"/>
                        </svg>
                    </div>
                    <h4 class="mb-3">Web Development</h4>
                    <p class="text-muted mb-0">Build stunning websites that engage your audience and drive results.</p>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card service-card shadow-sm h-100 p-4">
                    <div class="icon-circle gradient-custom mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-graph-up" viewBox="0 0 16 16">
                            <path d="M0 0h1v15h15v1H0zm14.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>
                    <h4 class="mb-3">Analytics</h4>
                    <p class="text-muted mb-0">Transform your data into actionable insights and strategic decisions.</p>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card service-card shadow-sm h-100 p-4">
                    <div class="icon-circle gradient-custom mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-shield-check" viewBox="0 0 16 16">
                            <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
                            <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                        </svg>
                    </div>
                    <h4 class="mb-3">Security</h4>
                    <p class="text-muted mb-0">Protect your digital assets with our advanced security solutions.</p>
                </div>
            </div>
        </div>
    </div>

More Examples

Features section
Showcase features with icons

Author:
Prajwal Hallale

7 months ago

231

v.4.6
Features Section
with icons

Author:
Anonymous

2 months ago

139

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

2 weeks ago

57

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

7 months ago

287

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

2 months ago

147

v.4.6
Features section

Author:
Juan Martinez

4 months ago

283

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

Author:
Alaric Sloane

2 weeks ago

52

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

7 months ago

246

v.5.3
CTA block
Beautiful CTA section with a form

Author:
Ross Wille

4 months ago

220

v.4.6
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

4 months ago

252

v.5.3
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

4 months ago

906

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

2 months ago

167

v.4.6

Didn't find component you were looking for?

Search from 200+ componenent