"Listing View"
Bootstrap 3.3.0 Snippet by jeevan123456

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <a href="#"> <div class="crane-grid-listing clearfix"> <div class="col-md-3 crane-image-block "> <div class="crane-list-img"> <img class="img-responsive"src="https://content.jdmagicbox.com/comp/ghaziabad/i7/011pxx11.xx11.140910143928.d1i7/catalogue/balaji-crane-services-patel-nagar-ghaziabad-ghaziabad-24-hours-cranes-on-hire-1y79o3x.jpg"> </div> </div> <div class="col-md-7"> <div class="crane-list-content"> <div class="crane-title"> <h3>Balaji Crane Service</h3> </div> <div class="crane-ratings"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="crane-phone"> <ul class="list-inline"> <li>+91-44558967</li> <li>+91-44558967</li> </ul> </div> <div class="crane-address"> <ul class="list-inline"> <li>124, Shivalik Road</li> <li>Opposite SBI Bank</li> <li>New Delhi</li> <li>110062</li> </ul> </div> <div class="crane-category"> <ul class="list-inline"> <li><a href="#">JCB Crane</a></li> <li><a href="#">Crane Towing Service</a></li> <li><a href="#">Hydraulic Crane</a></li> <li><a href="#">More...</a></li> </ul> </div> </div> </div> <div class="col-md-2"> <div class="margin-t-50"></div> <button type="button"class="btn btn-primary btn-block">Call Now</button> <button type="button"class="btn btn-primary btn-block">Booking</button> </div> </div> </a> </div> </div> </div>
.margin-l-0 {margin:0px} .margin-t-15 {margin-top:15px;} .margin-t-20 {margin-top:20px;} .margin-t-25 {margin-top:25px;} .margin-t-30 {margin-top:30px;} .margin-t-40 {margin-top:40px;} .margin-t-50 {margin-top:50px;} .crane-grid-listing {border:1px solid #febf00;} .crane-grid-listing:hover {box-shadow:2px 2px 2px #febf00;} .crane-image-block {padding:0px;margin:0px;} .crane-grid-listing a {text-decoration:none;} .crane-list-img {min-height: 180px; max-height: 181px; overflow: hidden;} .crane-list-content {height: 150px; overflow: hidden;}

Related: See More


Questions / Comments: