Free Bootstrap 5 utility snippet — Bootstrap 5 e-commerce product list with hover. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<div class="container bg-white">
2 <h2>Latest Products</h2>
3 <div class="row">
4 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
5 <div class="product"> <img src="https://images.pexels.com/photos/10415754/pexels-photo-10415754.jpeg" alt="">
6 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
7 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
8 <li class="icon mx-3"><span class="far fa-heart"></span></li>
9 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
10 </ul>
11 </div>
12 <div class="tag bg-red">Best Selling</div>
13 <div class="title pt-4 pb-1">Winter Check Shirt & Jacket</div>
14 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
15 <div class="price">₹ 2000.0</div>
16 </div>
17 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
18 <div class="product"> <img src="https://images.pexels.com/photos/983564/pexels-photo-983564.jpeg" alt="">
19 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
20 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
21 <li class="icon mx-3"><span class="far fa-heart"></span></li>
22 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
23 </ul>
24 </div>
25 <div class="tag bg-warning">out of stock</div>
26 <div class="title pt-4 pb-1">Yellow Skirt</div>
27 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
28 <div class="price">₹ 4000.0</div>
29 </div>
30 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
31 <div class="product"> <img src="https://images.pexels.com/photos/3097122/pexels-photo-3097122.jpeg" alt="">
32 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
33 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
34 <li class="icon mx-3"><span class="far fa-heart"></span></li>
35 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
36 </ul>
37 </div>
38 <div class="tag bg-green">latest</div>
39 <div class="title pt-4 pb-1"> White shirt & White short</div>
40 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
41 <div class="price">₹ 5000.0</div>
42 </div>
43 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
44 <div class="product"> <img src="https://images.pexels.com/photos/1574898/pexels-photo-1574898.jpeg" alt="">
45 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
46 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
47 <li class="icon mx-3"><span class="far fa-heart"></span></li>
48 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
49 </ul>
50 </div>
51 <div class="title pt-4 pb-1">Men Shorts</div>
52 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
53 <div class="price">₹ 1000.0</div>
54 </div>
55 </div>
56 <div class="row">
57 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
58 <div class="product"> <img src="https://images.pexels.com/photos/9487944/pexels-photo-9487944.jpeg" alt="">
59 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
60 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
61 <li class="icon mx-3"><span class="far fa-heart"></span></li>
62 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
63 </ul>
64 </div>
65 <div class="tag bg-red">Best Selling</div>
66 <div class="title pt-4 pb-1">Denim Jumpsuit</div>
67 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
68 <div class="price">₹ 3000.0</div>
69 </div>
70 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
71 <div class="product"> <img src="https://images.pexels.com/photos/10211454/pexels-photo-10211454.jpeg" alt="">
72 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
73 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
74 <li class="icon mx-3"><span class="far fa-heart"></span></li>
75 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
76 </ul>
77 </div>
78 <div class="tag bg-warning">out of stock</div>
79 <div class="title pt-4 pb-1">Sexy Denim Shorts</div>
80 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
81 <div class="price">₹ 5000.00</div>
82 </div>
83 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
84 <div class="product"> <img src="https://images.pexels.com/photos/2870355/pexels-photo-2870355.jpeg" alt="red dress">
85 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
86 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
87 <li class="icon mx-3"><span class="far fa-heart"></span></li>
88 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
89 </ul>
90 </div>
91 <div class="title pt-4 pb-1"> Princess Red Dress</div>
92 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
93 <div class="price">₹ 10000.00</div>
94 </div>
95 <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
96 <div class="product"> <img src="https://images.pexels.com/photos/3389419/pexels-photo-3389419.jpeg" alt="">
97 <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
98 <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
99 <li class="icon mx-3"><span class="far fa-heart"></span></li>
100 <li class="icon"><span class="fas fa-shopping-bag"></span></li>
101 </ul>
102 </div>
103 <div class="tag bg-green">new</div>
104 <div class="title pt-4 pb-1">White sandel</div>
105 <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
106 <div class="price">₹ 2000</div>
107 </div>
108 </div>
109</div>
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.
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.
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.