<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="crane-listview-section"> <div class="container"> <div class="col-md-7"> <div class="crane-listing"> <div class="crane-img-size"> <a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a> <span class="sticker">NEW</span> </div> <div class="crane-text size "> <h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3> <h5>Launched On: 07-Jun-2016</h5> <p class="news">Price: $ 30,000 Ex-showroom, New York</p> <h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6> <a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a> <ul class="p-t"> <li><a href="single.html">Photos</a></li> <li><a href="single.html">All Versions</a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="crane-listing"> <div class="crane-img-size"> <a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a> <span class="sticker">NEW</span> </div> <div class="crane-text size "> <h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3> <h5>Launched On: 07-Jun-2016</h5> <p class="news">Price: $ 30,000 Ex-showroom, New York</p> <h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6> <a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a> <ul class="p-t"> <li><a href="single.html">Photos</a></li> <li><a href="single.html">All Versions</a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="crane-listing"> <div class="crane-img-size"> <a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a> <span class="sticker">NEW</span> </div> <div class="crane-text size "> <h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3> <h5>Launched On: 07-Jun-2016</h5> <p class="news">Price: $ 30,000 Ex-showroom, New York</p> <h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6> <a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a> <ul class="p-t"> <li><a href="single.html">Photos</a></li> <li><a href="single.html">All Versions</a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="crane-listing"> <div class="crane-img-size"> <a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a> <span class="sticker">NEW</span> </div> <div class="crane-text size "> <h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3> <h5>Launched On: 07-Jun-2016</h5> <p class="news">Price: $ 30,000 Ex-showroom, New York</p> <h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6> <a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a> <ul class="p-t"> <li><a href="single.html">Photos</a></li> <li><a href="single.html">All Versions</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-3"> <h4>Launched On: 07-Jun-2016</h4> </div> </div> </div>

.tips-info { width: 70%; } .crane-listing { margin-bottom: 2.7em; border: 1px solid #ddd; padding: 15px; } .crane-img-size { float: left; width: 40%; position: relative; } a { color: #337ab7; text-decoration: none; } span.sticker { background-color: #349e11; color: #FFF; display: block; font-size: 14px; padding: 7px 15px; position: absolute; left: 0px; text-align: right; top: -1px; z-index: 2; line-height: 1; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; } .crane-text.size { float: right; width: 56%; } .crane-text h3 { font-size: 1.4em; color: #333333; font-weight: 400; text-transform: uppercase; margin-bottom: 0.5em; } .crane-text h5 { font-size: 1.1em; color: #333333; font-weight: 600; } .crane-text h6 { font-weight: 400; color: #777; margin-bottom: 1em; font-size: 1em; } ul.p-t li { display: inline-block; margin-right: 15px; }