→ 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

146

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