"Responsive Card by MdBootstrap 4.0.0"
Bootstrap 4.0.0 Snippet by Noman1416

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- googleapis css --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-3"> <!--Card--> <div class="card hoverable"> <!--Card image--> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Indonectetus facilis</h4> <!--Text--> <p class="card-text">Dignissimmorbi rhoncus sed netus ligula conseque netus nulla aliquat id dui fermentumnec.</p> </div> </div> <!--/.Card--> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <!--Card--> <div class="card hoverable"> <!--Card image--> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Indonectetus facilis</h4> <!--Text--> <p class="card-text">Dignissimmorbi rhoncus sed netus ligula conseque netus nulla aliquat id dui fermentumnec.</p> </div> </div> <!--/.Card--> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <!--Card--> <div class="card hoverable"> <!--Card image--> <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Indonectetus facilis</h4> <!--Text--> <p class="card-text">Dignissimmorbi rhoncus sed netus ligula conseque netus nulla aliquat id dui fermentumnec.</p> </div> </div> <!--/.Card--> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <!--Card--> <div class="card hoverable"> <!--Card image--> <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt=""> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Indonectetus facilis</h4> <!--Text--> <p class="card-text">Dignissimmorbi rhoncus sed netus ligula conseque netus nulla aliquat id dui fermentumnec.</p> </div> </div> <!--/.Card--> </div> </div> </div> </section> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!-- custom js --> <script type="text/javascript" src="js/custom.js"></script> </body> </html> <body>
.card{ background-color: #f0f0f0; } .card .card-title{ color: #7c9c37; } .card .card-text{ font-size: 14px; border:none; }

Related: See More

Vue Argon Design System
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: