<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row m-t-b-5"> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_1.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Bootstrap Designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_2.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">HTML designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_3.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">CSS designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_4.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Jquery Designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_5.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Javascript Designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> <div class="col-md-12 mt-3"> <div class="col-md-8 col-md-offset-2 vertical-cards"> <div class="media"> <div class="media-left"> <img src="https://webcentcreations.com/assets/images/snippet_images_dummy/Snippet_dummy_image_6.jpg" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">CSS3 Designs</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> </div> </div> </div> </div> </div> </div>

.m-t-b-5{ margin-top: 3em; margin-bottom: 3em; } .mt-3{ margin-top: 1.5em; } .pl-5{ padding-left: 3em; } .pr-5{ padding-right: 3em; } .vertical-cards .media{ box-shadow: 0px 8px 12px 2px rgb(162, 162, 165); background-color: #6be6bc; padding: 2em; color: #fff; position: relative; } .vertical-cards .media-left img{ width: 120px; position: absolute; top: 0; left: 0; height: 100%; } .vertical-cards .media-left{ padding-right: 110px; } @media (max-width: 450px){ .vertical-cards .media{ padding: 1em; } .vertical-cards .media-left{ padding-right: 120px; } } @media (max-width: 380px){ .vertical-cards .media-left img{ width: 85px; } .vertical-cards .media-left{ padding-right: 90px; } }