"Responsive Card by Bootstrap 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"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <section id="info" class=" black py-5"> <div class="container"> <div class="row"> <div class="col=col-sm-12 col-md-3"> <!--Card--> <div class="card hoverable"> <!--Title--> <h4 class="card-title text-uppercase">about us</h4> <!--Card image--> <img class="img-fluid img-thumbnail" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <!--Text--> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper pellentesque. Quisque non luctus sem.</p> <a class="hoverable" href="">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> </div> </div> <!--/.Card--> </div> <div class="col=col-sm-12 col-md-3"> <div class="card hoverable"> <!--Title--> <h4 class="card-title text-uppercase">link block</h4> <!--Card content--> <div class="card-body "> <div class="list-group"> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3 " aria-hidden="true"></i><a href="#">Cras justo odio</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Dapibus ac facilisis in</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Morbi leo risus</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Porta ac consectetur ac</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Vestibulum at eros</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#"">Cras justo odio</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Dapibus ac facilisis in</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Morbi leo risus</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Porta ac consectetur ac</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Vestibulum at eros</a></li> <li class="list-group-item border-0 p-0 hoverable"><i class="fa fa-angle-double-right mr-3" aria-hidden="true"></i><a href="#">Dapibus ac facilisis in</a></li> </div> </div> </div> <!--/.Card--> </div> <div class="col=col-sm-12 col-md-3"> <!--Card--> <div class="card hoverable"> <!--Title--> <h4 class="card-title text-uppercase">from the blog</h4> <!--Card content--> <div class="card-body"> <h4>Post Pitle</h4> <!--Text--> <time datetime="">Friday, 6th April 2000</time> <p class="card-text">Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</p> <a class="hoverable" href="">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> <h4>Post Pitle</h4> <!--Text--> <time datetime="">Friday, 6th April 2000</time> <p class="card-text">Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</p> <a class="hoverable" href="">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> </div> </div> <!--/.Card--> </div> <div class="col=col-sm-12 col-md-3"> <!--Card--> <div class="card hoverable"> <!--Title--> <h4 class="card-title text-uppercase">Contact us</h4> <!--Card content--> <div class="card-body"> <!--Text--> <p>Telephone:+8801683615582</p> <p>Fax:xxx xxxxxx</p> <p>Email:<a href="">al.a.noman1416@gmail.com</a></p> <h4>NEWSLETTER</h4> <div class="row"> <div class="col-sm-12"> <input type="text" class="form-control p-0" name="text" placeholder="Full Name"><br> </div> <div class="col-sm-12"> <input type="text" name="text" class="form-control p-0" placeholder="Email"><br> </div> <button type="submit" class="btn btn-primary my-3 px-5">Submit</button> </div> </div> </div> <!--/.Card--> </div> </div> </div> </section> <!-- 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> </body> </html>
#info{ border-bottom: 2px solid #ddd; background-color:black; } #info a{ color: #7c9c37 !important; } #info .card{ height: 450px; overflow: hidden; } #info .list-group-item{ padding-top: 3px !important; } #info .list-group-item a{ border-bottom: 1px solid #ddd !important; font-size: 14px; }

Related: See More

Vue Material Kit
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: