Bootstrap 5 ecommerce category product list with hover…

Utilities Bootstrap 5Free+ CSS

Free Bootstrap 5 utility snippet — Bootstrap 5 ecommerce category product list with hover…. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

4.9k views31 downloads5 years ago

gosnippets.com/preview/bootstrap-5-ecommerce-category-product-list-with-hover…

Source Code

1<div class="container mt-5">
2    <div class="row g-2">
3        <div class="col-md-3">
4            <div class="product">
5                <div class="product-card"> <span class="sale">Sale</span> <span class="price">$22.00</span> <img src="https://i.imgur.com/BtbMUtk.jpg" class="rounded img-fluid">
6                    <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div>
7                </div>
8            </div>
9        </div>
10        <div class="col-md-3">
11            <div class="product">
12                <div class="product-card"> <span class="price">$14.00</span> <img src="https://i.imgur.com/bN1XwRF.jpg" class="rounded img-fluid">
13                    <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div>
14                </div>
15            </div>
16        </div>
17        <div class="col-md-3">
18            <div class="product">
19                <div class="product-card"> <span class="sale">Out of stock</span> <span class="price">$54.00</span> <img src="https://i.imgur.com/JpfTO2W.jpg" class="rounded img-fluid">
20                    <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div>
21                </div>
22            </div>
23        </div>
24        <div class="col-md-3">
25            <div class="product">
26                <div class="product-card"> <span class="sale">10% OFF</span> <span class="price">$32.00</span> <img src="https://i.imgur.com/diQ2jeD.jpg" class="rounded img-fluid">
27                    <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div>
28                </div>
29            </div>
30        </div>
31    </div>
32</div>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container mt-5"> 2 <div class="row g-2"> 3 <div class="col-md-3"> 4 <div class="product"> 5 <div class="product-card"> <span class="sale">Sale</span> <span class="price">$22.00</span> <img src="https://i.imgur.com/BtbMUtk.jpg" class="rounded img-fluid"> 6 <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div> 7 </div> 8 </div> 9 </div> 10 <div class="col-md-3"> 11 <div class="product"> 12 <div class="product-card"> <span class="price">$14.00</span> <img src="https://i.imgur.com/bN1XwRF.jpg" class="rounded img-fluid"> 13 <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div> 14 </div> 15 </div> 16 </div> 17 <div class="col-md-3"> 18 <div class="product"> 19 <div class="product-card"> <span class="sale">Out of stock</span> <span class="price">$54.00</span> <img src="https://i.imgur.com/JpfTO2W.jpg" class="rounded img-fluid"> 20 <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div> 21 </div> 22 </div> 23 </div> 24 <div class="col-md-3"> 25 <div class="product"> 26 <div class="product-card"> <span class="sale">10% OFF</span> <span class="price">$32.00</span> <img src="https://i.imgur.com/diQ2jeD.jpg" class="rounded img-fluid"> 27 <div class="buttons d-flex flex-row"> <span class="search"><i class="fa fa-search"></i></span> <button class="btn btn-primary btn-sm">Add to cart</button> </div> 28 </div> 29 </div> 30 </div> 31 </div> 32</div>