"Card"
Bootstrap 4.1.1 Snippet by silentcoding

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="box"> <div class="container"> <div class="row"> <div class="col-lg-4 col-12 text-center"> <div class="box-column"> <div class="box-header box-header-twitter"> <i class="fa fa-twitter fa-3x" aria-hidden="true"></i> </div> <div class="box-bottom"> <div class="box-title twitter-title"> Twitter </div> <div class="box-text"> Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad. </div> <a href="#" target="_blank">GO NOW</a> </div> </div> </div> <div class="col-lg-4 col-12 text-center"> <div class="box-column"> <div class="box-header box-header-instagram"> <i class="fa fa-instagram fa-3x" aria-hidden="true"></i> </div> <div class="box-bottom"> <div class="box-title instagram-title"> Instagram </div> <div class="box-text"> Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad. </div> <a href="#" target="_blank">GO NOW</a> </div> </div> </div> <div class="col-lg-4 col-12 text-center"> <div class="box-column"> <div class="box-header box-header-facebook"> <i class="fa fa-facebook fa-3x" aria-hidden="true"></i> </div> <div class="box-bottom"> <div class="box-title facebook-title"> Facebook </div> <div class="box-text"> Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad. </div> <a href="#" target="_blank">GO NOW</a> </div> </div> </div> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900'); body { background-color: #eee; font-family: 'Montserrat', sans-serif; } a:hover, a:focus { text-decoration:none; } .box-header { background: #dedede; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 60px 0px; } .box-header .fa { color: #FFF; } .box-header-instagram { background: linear-gradient(45deg, #f2935b, #6f49c0); } .box-header-twitter { background: linear-gradient(45deg, #cae1f3, #55aded); } .box-header-facebook { background: linear-gradient(45deg, #95a2c1, #3b579d); } .box-bottom { background: #FFF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px 0px; } .box-text { padding: 10px 0px; } instagram-title { background: linear-gradient(45deg, #f2935b, #6f49c0); font-size: 20px; font-weight: 600; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .twitter-title { background: linear-gradient(45deg, #cae1f3, #55aded); font-size: 20px; font-weight: 600; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .facebook-title { color: #428bca; font-size: 20px; font-weight: 600; }

Related: See More


Questions / Comments: