<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <article class="search-result row"> <div class="col-xs-7 col-sm-5 col-md-3 col-lg-3"> <a href="#" title="Lorem ipsum" class="thumbnail"><img src="http://lorempixel.com/250/140/food" alt="Lorem ipsum" /></a> </div> <div class="col-xs-5 col-sm-7 col-md-9 col-lg-9"> <ul class="meta-search"> <li><span><h4>Product Title has a very long name for no fucking reason</h4></span></li> <li></i> <span>Company Name</span></li> <li></li> </ul> </div> <div class="col-xs-12 col-sm-12 col-md-7"> <span class="plus"><a href="#" title="Lorem ipsum"><i class="glyphicon glyphicon-plus"></i></a></span> </div> <span class="clearfix borda"></span> </article> </div>

.search-result .thumbnail { border-radius: 0 !important; } .search-result ul { padding-left: 0 !important; list-style: none; } .search-result ul li i { padding-right: 5px; } .search-result span.plus { position: absolute; right: 0; top: -30px; } .search-result span.plus a { background-color: #248dc1; padding: 5px 5px 3px 5px; } .search-result span.plus a:hover { background-color: #414141; } .search-result span.plus a i { color: #fff !important; }