<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" style="margin-top:10px;"> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://www.nstp.org/image/aftr/irs-forum-atlanta.jpg" class="panel-image-preview" /> </div> <div class="panel-footer"> <table class="table table-condensed text-center"> <tablebody> <tr> <td><a href="http://www.sheratonphoenixairport.com/" target="_blank"><i class="fa fa-bed"></i> Sheraton Phoenix Airport Hotel</a></td> <td><a href="https://www.google.com/maps/place/Sheraton+Phoenix+Airport+Hotel+Tempe/@33.410864, -111.970106,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0x61744a149ca757af" target="_blank"><i class="fa fa-map-marker"></i> 1600 S 52nd St Tempe<br/>AZ 85281</a></td> <td><i class="fa fa-phone"></i><a href="tel:1-480-967-6600">1-480-967-6600</a></td> </tr> </tablebody> </table> </div> </div> </div> </div> </div>

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-image ~ .panel-body, .panel-image.hide-panel-body ~ .panel-body { overflow: hidden; } .panel-image ~ .panel-footer a { padding: 0px 5px; font-size: .9em; color: rgb(100, 100, 100); }