Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<div class="super_container">
2 <header class="header" style="display: none;">
3 <div class="header_main">
4 <div class="container">
5 <div class="row">
6 <div class="col-lg-6 col-12 order-lg-2 order-3 text-lg-start text-end">
7 <div class="header_search">
8 <div class="header_search_content">
9 <div class="header_search_form_container">
10 <form action="#" class="header_search_form clearfix">
11 <div class="custom_dropdown">
12 <div class="custom_dropdown_list"> <span class="custom_dropdown_placeholder clc">All Categories</span> <i class="fas fa-chevron-down"></i>
13 <ul class="custom_list clc">
14 <li><a class="clc" href="#">All Categories</a></li>
15 </ul>
16 </div>
17 </div>
18 </form>
19 </div>
20 </div>
21 </div>
22 </div>
23 </div>
24 </div>
25 </div>
26 </header>
27 <div class="single_product">
28 <div class="container-fluid" style=" background-color: #fff; padding: 11px;">
29 <div class="row">
30 <div class="col-lg-2 order-lg-1 order-2">
31 <ul class="image_list">
32 <li data-image="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713229/single_4.jpg"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713229/single_4.jpg" alt=""></li>
33 <li data-image="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713228/single_2.jpg"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713228/single_2.jpg" alt=""></li>
34 <li data-image="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713228/single_3.jpg"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713228/single_3.jpg" alt=""></li>
35 </ul>
36 </div>
37 <div class="col-lg-4 order-lg-2 order-1">
38 <div class="image_selected"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565713229/single_4.jpg" alt=""></div>
39 </div>
40 <div class="col-lg-6 order-3">
41 <div class="product_description">
42 <nav>
43 <ol class="breadcrumb">
44 <li class="breadcrumb-item"><a href="#">Home</a></li>
45 <li class="breadcrumb-item"><a href="#">Products</a></li>
46 <li class="breadcrumb-item active">Accessories</li>
47 </ol>
48 </nav>
49 <div class="product_name">Acer Aspire 3 Celeron Dual Core - (2 GB/500 GB HDD/Windows 10 Home) A315-33 Laptop (15.6 inch, Black, 2.1 kg)</div>
50 <div class="product-rating"><span class="badge bg-success"><i class="fa fa-star"></i> 4.5 Star</span> <span class="rating-review">35 Ratings & 45 Reviews</span></div>
51 <div> <span class="product_price">₹ 29,000</span> <strike class="product_discount"> <span style='color:black'>₹ 2,000<span> </strike> </div>
52 <div> <span class="product_saved">You Saved:</span> <span style='color:black'>₹ 2,000<span> </div>
53 <hr class="singleline">
54 <div> <span class="product_info">EMI starts at ₹ 2,000. No Cost EMI Available<span><br> <span class="product_info">Warranty: 6 months warranty<span><br> <span class="product_info">7 Days easy return policy<span><br> <span class="product_info">7 Days easy return policy<span><br> <span class="product_info">In Stock: 25 units sold this week<span> </div>
55 <div>
56 <div class="row">
57 <div class="col-md-5">
58 <div class="br-dashed">
59 <div class="row">
60 <div class="col-md-3 col-xs-3"> <img src="https://img.icons8.com/color/48/000000/price-tag.png"> </div>
61 <div class="col-md-9 col-xs-9">
62 <div class="pr-info"> <span class="break-all">Get 5% instant discount + 10X rewards @ RENTOPC</span> </div>
63 </div>
64 </div>
65 </div>
66 </div>
67 <div class="col-md-7"> </div>
68 </div>
69 <div class="row" style="margin-top: 15px;">
70 <div class="col-xs-6" style="margin-left: 15px;"> <span class="product_options">RAM Options</span><br> <button class="btn btn-primary btn-sm">4 GB</button> <button class="btn btn-primary btn-sm">8 GB</button> <button class="btn btn-primary btn-sm">16 GB</button> </div>
71 <div class="col-xs-6" style="margin-left: 55px;"> <span class="product_options">Storage Options</span><br> <button class="btn btn-primary btn-sm">500 GB</button> <button class="btn btn-primary btn-sm">1 TB</button> </div>
72 </div>
73 </div>
74 <hr class="singleline">
75 <div class="order_info d-flex flex-row">
76 <form action="#">
77 </div>
78 <div class="row">
79 <div class="col-xs-6" style="margin-left: 13px;">
80 <div class="product_quantity"> <span>QTY: </span> <input id="quantity_input" type="text" pattern="[0-9]*" value="1">
81 <div class="quantity_buttons">
82 <div id="quantity_inc_button" class="quantity_inc quantity_control"><i class="fas fa-chevron-up"></i></div>
83 <div id="quantity_dec_button" class="quantity_dec quantity_control"><i class="fas fa-chevron-down"></i></div>
84 </div>
85 </div>
86 </div>
87 <div class="col-xs-6"> <button type="button" class="btn btn-primary shop-button">Add to Cart</button> <button type="button" class="btn btn-success shop-button">Buy Now</button>
88 <div class="product_fav"><i class="fas fa-heart"></i></div>
89 </div>
90 </div>
91 </div>
92 </div>
93 </div>
94 <div class="row row-underline">
95 <div class="col-md-6"> <span class=" deal-text">Combo Offers</span> </div>
96 <div class="col-md-6"> <a href="#" data-abc="true"> <span class="ms-auto view-all"></span> </a> </div>
97 </div>
98 <div class="row">
99 <div class="col-md-5">
100 <div class="row padding-2">
101 <div class="col-md-5 padding-0">
102 <div class="bbb_combo">
103 <div class="bbb_combo_image"><img class="bbb_combo_image" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
104 <div class="d-flex flex-row justify-content-start"> <strike style="color:red;"> <span class="fs-10" style="color:black;">₹ 32,000<span> </span></span></strike> <span class="ms-auto"><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i></span> </div>
105 <div class="d-flex flex-row justify-content-start" style=" margin-bottom: 13px; "> <span style="margin-top: -4px;">₹30,000</span> <span class="ms-auto fs-10">23 Reviews</span> </div> <span>Acer laptop with 10GB RAM + 500 GB Hard Disk</span>
106 </div>
107 </div>
108 <div class="col-md-2 text-center"> <span class="step">+</span> </div>
109 <div class="col-md-5 padding-0">
110 <div class="bbb_combo">
111 <div class="bbb_combo_image"><img class="bbb_combo_image" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
112 <div class="d-flex flex-row justify-content-start"> <strike style="color:red;"> <span class="fs-10" style="color:black;">₹ 32,000<span> </span></span></strike> <span class="ms-auto"><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i></span> </div>
113 <div class="d-flex flex-row justify-content-start" style=" margin-bottom: 13px; "> <span style="margin-top: -4px;">₹30,000</span> <span class="ms-auto fs-10">23 Reviews</span> </div> <span>Acer laptop with 10GB RAM + 500 GB Hard Disk</span>
114 </div>
115 </div>
116 </div>
117 <div class="row">
118 <div class="col-xs-12" style="margin-left: 36px;">
119 <div class="boxo-pricing-items">
120 <div class="combo-pricing-item"> <span class="items_text">1 Item</span> <span class="combo_item_price">₹13,200</span> </div>
121 <div class="combo-plus"> <span class="plus-sign">+</span> </div>
122 <div class="combo-pricing-item"> <span class="items_text">1 Add-on</span> <span class="combo_item_price">₹500</span> </div>
123 <div class="combo-plus"> <span class="plus-sign">=</span> </div>
124 <div class="combo-pricing-item"> <span class="items_text">Total</span> <span class="combo_item_price">₹13,700</span> </div>
125 <div class="add-both-cart-button"> <button type="button" class="btn btn-primary shop-button">Add to Cart</button> </div>
126 </div>
127 </div>
128 </div>
129 </div>
130 <div class="col-md-2 text-center"> <span class="vertical-line"></span> </div>
131 <div class="col-md-5" style=" margin-left: -27px;">
132 <div class="row padding-2">
133 <div class="col-md-5 padding-0">
134 <div class="bbb_combo">
135 <div class="bbb_combo_image"><img class="bbb_combo_image" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
136 <div class="d-flex flex-row justify-content-start"> <strike style="color:red;"> <span class="fs-10" style="color:black;">₹ 32,000<span> </span></span></strike> <span class="ms-auto"><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating p-rating"></i><i class="fa fa-star p-rating"></i></span> </div>
137 <div class="d-flex flex-row justify-content-start" style=" margin-bottom: 13px; "> <span style="margin-top: -4px;">₹30,000</span> <span class="ms-auto fs-10">23 Reviews</span> </div> <span>Acer laptop with 10GB RAM + 500 GB Hard Disk</span>
138 </div>
139 </div>
140 <div class="col-md-2 text-center"> <span class="step">+</span> </div>
141 <div class="col-md-5 padding-0">
142 <div class="bbb_combo">
143 <div class="bbb_combo_image"><img class="bbb_combo_image" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
144 <div class="d-flex flex-row justify-content-start"> <strike style="color:red;"> <span class="fs-10" style="color:black;">₹ 32,000<span> </span></span></strike> <span class="ms-auto"><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i><i class="fa fa-star p-rating"></i></span> </div>
145 <div class="d-flex flex-row justify-content-start" style=" margin-bottom: 13px; "> <span style="margin-top: -4px;">₹30,000</span> <span class="ms-auto fs-10">23 Reviews</span> </div> <span>Acer laptop with 10GB RAM + 500 GB Hard Disk</span>
146 </div>
147 </div>
148 </div>
149 <div class="row">
150 <div class="col-xs-12" style="margin-left: 36px;">
151 <div class="boxo-pricing-items">
152 <div class="combo-pricing-item"> <span class="items_text">1 Item</span> <span class="combo_item_price">₹13,200</span> </div>
153 <div class="combo-plus"> <span class="plus-sign">+</span> </div>
154 <div class="combo-pricing-item"> <span class="items_text">1 Add-on</span> <span class="combo_item_price">₹500</span> </div>
155 <div class="combo-plus"> <span class="plus-sign">=</span> </div>
156 <div class="combo-pricing-item"> <span class="items_text">Total</span> <span class="combo_item_price">₹13,700</span> </div>
157 <div class="add-both-cart-button"> <button type="button" class="btn btn-primary shop-button">Add to Cart</button> </div>
158 </div>
159 </div>
160 </div>
161 </div>
162 </div>
163 <div class="row row-underline">
164 <div class="col-md-6"> <span class=" deal-text">Specifications</span> </div>
165 <div class="col-md-6"> <a href="#" data-abc="true"> <span class="ms-auto view-all"></span> </a> </div>
166 </div>
167 <div class="row">
168 <div class="col-md-12">
169 <table class="col-md-12">
170 <tbody>
171 <tr class="row mt-10">
172 <td class="col-md-4"><span class="p_specification">Sales Package :</span> </td>
173 <td class="col-md-8">
174 <ul>
175 <li>2 in 1 Laptop, Power Adaptor, Active Stylus Pen, User Guide, Warranty Documents</li>
176 </ul>
177 </td>
178 </tr>
179 <tr class="row mt-10">
180 <td class="col-md-4"><span class="p_specification">Model Number :</span> </td>
181 <td class="col-md-8">
182 <ul>
183 <li> 14-dh0107TU </li>
184 </ul>
185 </td>
186 </tr>
187 <tr class="row mt-10">
188 <td class="col-md-4"><span class="p_specification">Part Number :</span> </td>
189 <td class="col-md-8">
190 <ul>
191 <li>7AL87PA</li>
192 </ul>
193 </td>
194 </tr>
195 <tr class="row mt-10">
196 <td class="col-md-4"><span class="p_specification">Color :</span> </td>
197 <td class="col-md-8">
198 <ul>
199 <li>Black</li>
200 </ul>
201 </td>
202 </tr>
203 <tr class="row mt-10">
204 <td class="col-md-4"><span class="p_specification">Suitable for :</span> </td>
205 <td class="col-md-8">
206 <ul>
207 <li>Processing & Multitasking</li>
208 </ul>
209 </td>
210 </tr>
211 <tr class="row mt-10">
212 <td class="col-md-4"><span class="p_specification">Processor Brand :</span> </td>
213 <td class="col-md-8">
214 <ul>
215 <li>Intel</li>
216 </ul>
217 </td>
218 </tr>
219 </tbody>
220 </table>
221 </div>
222 </div>
223 </div>
224 </div>
225</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.
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.