Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<div class="container">
2 <div class="col-lg-8 border p-3 main-section bg-white">
3 <div class="row hedding m-0 ps-3 pt-0 pb-3">
4 Product Detail Design Using Bootstrap 4.0
5 </div>
6 <div class="row m-0">
7 <div class="col-lg-4 left-side-product-box pb-3">
8 <img src="http://nicesnippets.com/demo/pd-image1.jpg" class="border p-3">
9 <span class="sub-img">
10 <img src="http://nicesnippets.com/demo/pd-image2.jpg" class="border p-2">
11 <img src="http://nicesnippets.com/demo/pd-image3.jpg" class="border p-2">
12 <img src="http://nicesnippets.com/demo/pd-image4.jpg" class="border p-2">
13 </span>
14 </div>
15 <div class="col-lg-8">
16 <div class="right-side-pro-detail border p-3 m-0">
17 <div class="row">
18 <div class="col-lg-12">
19 <span>Who What Wear</span>
20 <p class="m-0 p-0">Women's Velvet Dress</p>
21 </div>
22 <div class="col-lg-12">
23 <p class="m-0 p-0 price-pro">$30</p>
24 <hr class="p-0 m-0">
25 </div>
26 <div class="col-lg-12 pt-2">
27 <h5>Product Detail</h5>
28 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
29 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
30 quis nostrud exercitation ullamco laboris.</span><hr class="m-0 pt-2 mt-2">
31 </div>
32 <div class="col-lg-12">
33 <p class="tag-section"><strong>Tag : </strong><a href="">Woman</a><a href="">,Man</a></p>
34 </div>
35 <div class="col-lg-12">
36 <h6>Quantity :</h6>
37 <input type="number" class="form-control text-center w-100" value="1">
38 </div>
39 <div class="col-lg-12 mt-3">
40 <div class="row">
41 <div class="col-lg-6 pb-2">
42 <a href="#" class="btn btn-danger w-100">Add To Cart</a>
43 </div>
44 <div class="col-lg-6">
45 <a href="#" class="btn btn-success w-100">Shop Now</a>
46 </div>
47 </div>
48 </div>
49 </div>
50 </div>
51 </div>
52 </div>
53 <div class="row">
54 <div class="col-lg-12 text-center pt-3">
55 <h4>More Product</h4>
56 </div>
57 </div>
58 <div class="row mt-3 p-0 text-center pro-box-section">
59 <div class="col-lg-3 pb-2">
60 <div class="pro-box border p-0 m-0">
61 <img src="http://nicesnippets.com/demo/pd-b-image1.jpg">
62 </div>
63 </div>
64 <div class="col-lg-3 pb-2">
65 <div class="pro-box border p-0 m-0">
66 <img src="http://nicesnippets.com/demo/pd-b-images2.jpg">
67 </div>
68 </div>
69 <div class="col-lg-3 pb-2">
70 <div class="pro-box border p-0 m-0">
71 <img src="http://nicesnippets.com/demo/pd-b-images3.jpg">
72 </div>
73 </div>
74 <div class="col-lg-3 pb-2">
75 <div class="pro-box border p-0 m-0">
76 <img src="http://nicesnippets.com/demo/pd-b-images4.jpg">
77 </div>
78 </div>
79 </div>
80 </div>
81</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 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.
Full-Screen loader spinner example with pure CSS
Full-Screen loader spinner example with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.