→ Mateo Rojas
→ Feature showcase cards

Feature showcase cards

This bootstrap css example is contributed by Mateo Rojas, on 21-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 Mateo Rojas

199

v.5.3

Fork Fullscreen

<section class="py-5">
    <div class="container">
        <div class="row g-4">
            
            <div class="col-md-4">
                <div class="card feature-card shadow-sm h-100 p-4">
                    <div class="icon-box bg-primary bg-opacity-10 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-lightning-charge text-primary" viewBox="0 0 16 16">
                            <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
                        </svg>
                    </div>
                    <h4 class="mb-3">Fast Performance</h4>
                    <p class="text-muted">Optimize your website for lightning-fast loading speeds and seamless user experience.</p>
                </div>
            </div>

<div class="col-md-4">
                <div class="card feature-card shadow-sm h-100 p-4">
                    <div class="icon-box bg-success bg-opacity-10 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-shield-check text-success" 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"/>
                        </svg>
                    </div>
                    <h4 class="mb-3">Secure Platform</h4>
                    <p class="text-muted">Enhanced security measures to protect your data and ensure safe transactions.</p>
                </div>
            </div>

<div class="col-md-4">
                <div class="card feature-card shadow-sm h-100 p-4">
                    <div class="icon-box bg-warning bg-opacity-10 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-warning" viewBox="0 0 16 16">
                            <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                            <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                        </svg>
                    </div>
                    <h4 class="mb-3">Easy Configuration</h4>
                    <p class="text-muted">Simple and intuitive settings to customize your experience exactly how you want it.</p>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

Modern Service Cards Component With Icons

Author:
Alaric Sloane

4 months ago

370

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

4 months ago

654

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

Author:
Anonymous

2 months ago

1.4k

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

11 months ago

473

v.4.6
Features section
Showcase features with icons

Author:
Prajwal Hallale

11 months ago

392

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

5 months ago

373

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

Author:
Alaric Sloane

4 months ago

419

v.5.3
Features Section
with icons

Author:
Anonymous

6 months ago

301

v.5.3
Features section

Author:
Juan Martinez

7 months ago

470

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

6 days ago

78

v.4.6
Bootstrap Footer example
dark footer

Author:
Anonymous

10 months ago

693

v.3.4
Clean Timeline Changelog
clean and beautiful changelog example

Author:
Alaric Sloane

5 months ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent