Bootstrap 5 E-commerce product card checkout

Loading…

Bootstrap 5 E-commerce product card checkout | GoSnippets

Source Code

1 <div class="container d-flex justify-content-center">
2     <figure class="card card-product-grid card-lg"> <a href="#" class="img-wrap" data-abc="true"> <img src="https://i.imgur.com/lLs9Gao.jpg"> </a>
3         <figcaption class="info-wrap">
4             <div class="row">
5                 <div class="col-md-9 col-xs-9"> <a href="#" class="title" data-abc="true">Dell Xtreme 270</a> <span class="rated">Laptops</span> </div>
6                 <div class="col-md-3 col-xs-3">
7                     <div class="rating text-end"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <span class="rated">Rated 4.0/5</span> </div>
8                 </div>
9             </div>
10         </figcaption>
11         <div class="bottom-wrap-payment">
12             <figcaption class="info-wrap">
13                 <div class="row">
14                     <div class="col-md-9 col-xs-9"> <a href="#" class="title" data-abc="true">$3,999</a> <span class="rated">VISA Platinum</span> </div>
15                     <div class="col-md-3 col-xs-3">
16                         <div class="rating text-end"> #### 8787 </div>
17                     </div>
18                 </div>
19             </figcaption>
20         </div>
21         <div class="bottom-wrap"> <a href="#" class="btn btn-primary float-end" data-abc="true"> Buy now </a>
22             <div class="price-wrap"> <a href="#" class="btn btn-warning float-start" data-abc="true"> Cancel </a> </div>
23         </div>
24     </figure>
25 </div>

Bootstrap 5 E-commerce product card checkout

Source Code

More Cards snippets

Comments(0)