<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 newsNavigation"> <a href="#"> <div class="col-md-6"> <div class="media previousNews"> <div class="media-left arrow-left"> <img class="media-object" src="http://imgh.us/left-arrow.svg" alt="..." style=""> </div> <div class="media-body"> <div class="media-heading text-right">Media heading</div> </div> <div class="media-right"> <img class="media-object" src="http://www.trtworld.com/sites/default/files/styles/news_square_small/public/images/2016/08/01//trtworld-nid-155316-fid-187731.jpg?itok=cJ88SmMs" alt="..."> </div> </div> </div> </a> <a href="#"> <div class="col-md-6"> <div class="media nextNews"> <div class="media-left"> <img class="media-object" src="http://www.trtworld.com/sites/default/files/styles/news_square_small/public/images/2016/08/01//trtworld-nid-155316-fid-187731.jpg?itok=cJ88SmMs" alt="..."> </div> <div class="media-body"> <div class="media-heading text-left">Media heading</div> </div> <div class="media-right arrow-right"> <img class="media-object" src="http://imgh.us/right-arrow_1.svg" alt="..." style=""> </div> </div> </div> </a> </div> </div>

.media-body { width:100%; } .media-left, .media-right { vertical-align: middle; } .arrow-left img, .arrow-right img { width:27px; } .arrow-left, .arrow-right { padding:5px;} .previousNews { background:#008da2; } .nextNews { background:#00b6ca; } .newsNavigation a { color:#fff; }