HTML / Markup Public

Responsive Bootstrap Product Card

A modern responsive product card built with Bootstrap 5, featuring a hover animation and a call-to-action button.

#első #valami #akármi

HTML / Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .product-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .product-img {
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body class="bg-light">

<div class="container py-5">
    <div class="row justify-content-center">

        <div class="col-md-4">
            <div class="card product-card border-0 rounded-4">

                <img src="https://picsum.photos/400/300" class="card-img-top product-img" alt="Product">

                <div class="card-body">
                    <h5 class="card-title">Premium Headphones</h5>
                    <p class="text-muted small mb-2">High quality sound with noise cancellation.</p>

                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-bold">$99</span>
                        <button class="btn btn-primary btn-sm rounded-3">
                            Buy now
                        </button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

</body>
</html>

Snippet actions

Pluto

Updated: 2026-08-09 11:16

Public snippets

Forks