<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="flexy"> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> <div class="col-sm-12 col-md-3"> <div class="card"> <div class="card-body"> <span class="social text-center"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive"/> <div class="card-img-overlay text"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> </div> </div> </div> </div> </div>

.text{ background-color:#aa227799; text-align:center; color:white; line-height: 1.2px; padding-top: 5px; } .social-bar{ background-color:#aa227799; text-align:center; color:white; line-height: 1.2px; height: 5px; padding-top:5px; } .col-md-3{ margin-bottom:40px; } @media screen and (min-width: 400px){ .flexy{ display: flex; flex-wrap: wrap; justify-content: center; } } @media screen and (min-width: 400px){ .text{ /*margin-top:80%;*/ } } @media screen and (max-width: 400px){ .text{ /*margin-top:70%;*/ } } .social{ text-align: center; margin: 0 auto; display:block; /*left: 50%;*/ } .social a{ color:pink; padding-left:15px; display: inline-block; left: 50%; float: none; } .small-text{ font-size: 14px; font-weight:bold; }