→ Levi Treadwell
→ Beautiful Product card with bootstrap cs...

Beautiful Product card with bootstrap css

This bootstrap css example is contributed by Levi Treadwell, on 22-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Product Showcase

Tags: Product

Author Levi Treadwell

1.4k

v.5.3

Fork Fullscreen

<div class="bg-light p-4">
    <div class="container">
        <div class="card product-card shadow-sm" style="max-width: 350px; margin: 0 auto;">
            <div class="position-relative overflow-hidden">
                <span class="badge bg-danger badge-floating">Sale!</span>
                <img src="https://images.unsplash.com/photo-1487215078519-e21cc028cb29?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8cHJlbWl1bSUyMGhlYWRwaG9uZXxlbnwwfDB8fHwxNzM0ODUwNDgxfDA&ixlib=rb-4.0.3&q=80&w=1080" class="product-image card-img-top" alt="Product Image">
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="card-title mb-0">Premium Wireless Headphones</h5>
                    <div class="text-warning">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
                <p class="card-text text-muted">High-quality wireless headphones with noise cancellation and premium
                    sound.</p>
                <div class="mb-3">
                    <span class="text-muted small">Available Colors:</span>
                    <div class="mt-2">
                        <span class="color-option active" style="background-color: #000000;" title="Black"></span>
                        <span class="color-option" style="background-color: #FFFFFF;" title="White"></span>
                        <span class="color-option" style="background-color: #C0C0C0;" title="Silver"></span>
                        <span class="color-option" style="background-color: #FFD700;" title="Gold"></span>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <span class="text-muted text-decoration-line-through">$299.99</span>
                        <span class="h4 mb-0 ms-2 text-primary">$249.99</span>
                    </div>
                    <span class="badge bg-success">In Stock</span>
                </div>
                <div class="d-grid gap-2">
                    <button class="btn btn-primary">
                        <i class="fas fa-shopping-cart me-2"></i>Add to Cart
                    </button>
                    <button class="btn btn-outline-secondary">
                        <i class="fas fa-heart me-2"></i>Add to Wishlist
                    </button>
                </div>
            </div>
            <div class="card-footer bg-white">
                <div class="d-flex justify-content-between text-muted small">
                    <span><i class="fas fa-truck me-2"></i>Free Shipping</span>
                    <span><i class="fas fa-undo me-2"></i>30 Days Return</span>
                </div>
            </div>
        </div>
    </div>

More Examples

Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

12.9k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

9 months ago

1.9k

v.5.3
Bootstrap Product Card

Author:
Anonymous

1 year ago

3.4k

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

8 months ago

1.6k

v.5.3
Elegant Product Showcase Component

Author:
Anonymous

11 months ago

1.5k

v.5.3
Products Grid
E-commerce product grid

Author:
Juan Martinez

1 year ago

3.9k

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

1 year ago

22.6k

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

7 months ago

807

v.4.6
Product Card Component
Minimal Product Card

Author:
Juniper

11 months ago

1.3k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.9k

v.5.3
Product detail page bootstrap

Author:
Reza Farhadi

9 months ago

3.5k

v.5.3
Sidebar navigation with toggle button

Author:
Moana silva

1 year ago

5.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent