"card shop"
Bootstrap 4.1.1 Snippet by PaataKurdadze

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> .card-img { height: 320px; } </style> <div class="container"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">Google Pixel 4 XL</h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/qnFXcYc/google-pixel-4-xl-1.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$ 669.00</span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i> Released 2019, October 22. <i class="fas fa-mobile-alt"></i> 193g, 8.2mm thickness. <i class="fas fa-code"></i> Android 10. <i class="far fa-hdd"></i> 64GB/128GB storage, no card slot. </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">Sony Xperia 1 II</h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/GczqV6f/sony-xperia-1-II-002.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$ 1,199.99</span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i> Released 2020, May 22. <i class="fas fa-mobile-alt"></i> 181.4g, 7.6mm thickness. <i class="fas fa-code"></i> Android 10. <i class="far fa-hdd"></i> 256GB storage, microSDXC. </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">Samsung Galaxy S20</h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/LdzsZnK/samsung-galaxy-s20-5g-r1.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$ 749.99</span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i> Released 2020, March 06. <i class="fas fa-mobile-alt"></i> 163g, 7.9mm thickness. <i class="fas fa-code"></i> Android 10, One UI 2. <i class="far fa-hdd"></i> 128GB storage, microSDXC. </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> </div> </div><br> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">Motorola Edge+ </h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/z6cwcWX/motorola-edge-plus-r3.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$999.99 </span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i>Released 2020, May 14. <i class="fas fa-mobile-alt"></i> 203g, 9.6mm thickness. <i class="fas fa-code"></i> Android 10. <i class="far fa-hdd"></i> 256GB storage, no card slot. </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">LG G8S ThinQ</h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/1GNTcM4/lg-g8s-thinq-3.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$ 389.00</span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i> Released 2019, Nov 01. <i class="fas fa-mobile-alt"></i> 192g, 8.4mm thickness. <i class="fas fa-code"></i> Android 10, LG UX 10.0. <i class="far fa-hdd"></i> 128GB storage, microSDXC. </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white text-center border-info"> <div class="card-header bg-info"> <h4 class="card-title">Nokia 8.3 5G</h4> </div> <div class="card-body"> <a href="#"> <img class="card-img img-thumbnail" src="https://i.ibb.co/ZdJDHNc/nokia-83-5g-1.jpg" alt="Google Pixel 4 XL"> </a> <div class="d-flex justify-content-end"> <a href="#" class="btn btn-warning" role="button"> <span class="badge badge badge-danger">$524.13</span>  Buy Now </a> </div> </div> <div class="card-footer bg-info"> <p class="card-text"> <i class="fas fa-calendar-day"></i>Exp. release 2020, July. <i class="fas fa-mobile-alt"></i>220g, 9mm thickness. <i class="fas fa-code"></i> Android 10, Android One. <i class="far fa-hdd"></i> 64GB/128GB storage, microSDXC </p> <button type="button" class="btn btn-danger btn-block">Details</button> </div> </div> </div> </div> </div><br><br> </div>

Related: See More


Questions / Comments: