→ Ross Wille
→ Responsive Products Grid

Responsive Products Grid

This bootstrap css example is contributed by Ross Wille, on 18-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Product Showcase

Tags: Product Grid

Author Ross Wille

1.6k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h2 class="text-center mb-4">Our Products</h2>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        
        <div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://images.unsplash.com/photo-1598618826732-fb2fdf367775?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxzbWFydHBob25lfGVufDB8MHx8fDE3MjEzMDU4NTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" class="card-img-top" alt="Product 1">
                <div class="card-body">
                    <h5 class="card-title">Product 1</h5>
                    <p class="card-text">A brief description of Product 1 and its features.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="h5 mb-0">$19.99</span>
                        <button class="btn btn-outline-primary"><i class="bi bi-cart-plus"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://images.unsplash.com/photo-1720048171731-15b3d9d5473f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MXwxfHNlYXJjaHwxfHxzbWFydHBob25lfGVufDB8MHx8fDE3MjEzMDU4NTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" class="card-img-top" alt="Product 2">
                <div class="card-body">
                    <h5 class="card-title">Product 2</h5>
                    <p class="card-text">A brief description of Product 2 and its features.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="h5 mb-0">$24.99</span>
                        <button class="btn btn-outline-primary"><i class="bi bi-cart-plus"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://images.unsplash.com/photo-1600087626120-062700394a01?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxzbWFydHBob25lfGVufDB8MHx8fDE3MjEzMDU4NTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" class="card-img-top" alt="Product 3">
                <div class="card-body">
                    <h5 class="card-title">Product 3</h5>
                    <p class="card-text">A brief description of Product 3 and its features.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="h5 mb-0">$29.99</span>
                        <button class="btn btn-outline-primary"><i class="bi bi-cart-plus"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://images.unsplash.com/photo-1598965402089-897ce52e8355?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxzbWFydHBob25lfGVufDB8MHx8fDE3MjEzMDU4NTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" class="card-img-top" alt="Product 4">
                <div class="card-body">
                    <h5 class="card-title">Product 4</h5>
                    <p class="card-text">A brief description of Product 4 and its features.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="h5 mb-0">$34.99</span>
                        <button class="btn btn-outline-primary"><i class="bi bi-cart-plus"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Products Grid
E-commerce product grid

Author:
Juan Martinez

9 months ago

2k

v.5.3
Product Card Component
Minimal Product Card

Author:
Juniper

6 months ago

876

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

7 months ago

740

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

9 months ago

3k

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

Author:
Juan Martinez

9 months ago

7k

v.5.3
Bento Grid Layout with Images

Author:
Juan Martinez

9 months ago

1.9k

v.5.3
Bento Grid with Bootstrap 5

Author:
C B

7 months ago

731

v.5.3
Product detail page bootstrap

Author:
Reza Farhadi

4 months ago

2k

v.5.3
Bento grid bootstrap

Author:
Anonymous

4 months ago

698

v.5.3
Blog Post Grid
Responsive blog post grid

Author:
Kemaya m

9 months ago

1.2k

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

2 months ago

356

v.4.6
Beautiful Product card with bootstrap css

Author:
Levi Treadwell

4 months ago

712

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent