Bootstrap 5 Ecommerce Product Detail Page Design snippet

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>