Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"card shop"
Bootstrap 4.1.1 Snippet by
PaataKurdadze
4.1.1
Preview
HTML
View Full Screen
Forked from
Fork
Fork this
Parent
443
 
0 Fav
Post to Facebook
Tweet this
<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>
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76