"horizontal card box bs4"
Bootstrap 4.0.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="cars-horizon"> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="row py-2"> <div class="col-md-7 car-image-block"> <h3> Used cars in Hyderabad</h3> </div> <div class="col-md-3 "> <div class="form-group"> <select class="form-control" id="sel1"> <option>Relevance</option> <option>Price: Low to High</option> <option>Price: High to Low</option> <option>Kms: Low to High</option> <option>Model: Newest to Oldest</option> </select> </div> </div> <div class="col-md-2 pt-1"> <a href="#"><i class="fa fa-th fa-2x pr-2"></i> </a> <a href="#"><i class="fa fa-list-ul fa-2x"></i> </a> </div> </div> <div class="row border"> <div class="col-md-4 car-image-block"> <a href="#"><img src="https://gaadicdn.com/usedcar_image/320x240/VCC_848014_1_1522323829348_4_648905_24_1522324193.jpg "></a> </div> <div class="col-md-8 card-body "> <a href="#"><h3>2013 Hyundai EON Era Plus</h3> </a> <h5>Rs.2.1 Lakh</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> <div class="row mt-3 border"> <div class="col-md-4 car-image-block"> <a href="#"><img src="https://gaadicdn.com/usedcar_image/320x240/VCC_848014_1_1522323829348_4_648905_24_1522324193.jpg "></a> </div> <div class="col-md-8 card-body "> <a href="#"><h3>2013 Hyundai EON Era Plus</h3> </a> <h5>Rs.2.1 Lakh</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> <div class="row mt-3 border"> <div class="col-md-4 car-image-block"> <a href="#"><img src="https://gaadicdn.com/usedcar_image/320x240/VCC_848014_1_1522323829348_4_648905_24_1522324193.jpg "></a> </div> <div class="col-md-8 card-body "> <a href="#"><h3>2013 Hyundai EON Era Plus</h3> </a> <h5>Rs.2.1 Lakh</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> </div> </div> </div>
img {width:100%;} .car-image-block {padding:0px;margin:0px;} .car-image-block img {min-height: 200px; overflow: hidden;}
.crane-image-block {padding:0px;margin:0px;} .crane-list-img img {min-height: 200px; overflow: hidden;}

Related: See More


Questions / Comments: