<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="head">
<div class="container">
<h2 class="text-center"><span>Search Result Panel in Bootstrap 4</span>Created with <i class="fa fa-heart"></i> from Grafreez</h2>
</div>
</section>
<div class="clearfix"></div>
<section class="search-box">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 listing-block">
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$799,000<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$506,400<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/358636/pexels-photo-358636.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$506,400<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$799,000<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$506,400<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
<div class="media">
<div class="fav-box"><i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<img class="d-flex align-self-start" src="https://images.pexels.com/photos/358636/pexels-photo-358636.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Generic placeholder image">
<div class="media-body pl-3">
<div class="price">$506,400<small>New York</small></div>
<div class="stats">
<span><i class="fa fa-arrows-alt"></i>1678 Sq ft</span>
<span><i class="fa fa-bath"></i>2 Beadrooms</span>
</div>
<div class="address">4062 Walnut Hill Drive
Cincinnati</div>
</div>
</div>
</div>
<div class="col-md-7 map-box mx-0 px-0">
<iframe width="100%" height="495" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&815&sspn=8.047465,13.666992&ie=UTF8&hq=&hnear=15+Springfield+Way,+Hythe+CT21+5SH,+United+Kingdom&t=m&z=14&ll=51.077429,1.121722&output=embed"></iframe>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('.listing-block').slimScroll({
height: '500px'
});
});
</script>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700');
h2{float:left; width:100%; color:#fff; margin-bottom:40px; font-size: 14px; position:relartive; z-index:3; margin-top:30px}
h2 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h2 a{color:#fff; font-weight:bold;}
body{background: #24C6DC; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #514A9D, #24C6DC); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #514A9D, #24C6DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.head{float:left;width:100%;}
.search-box{width:90%; margin:0 auto 40px; box-shadow:10px 13px 0 rgba(0,0,0,0.2);}
.listing-block{background:#fff; height:500px; padding-top:20px; overflow-y:scroll;}
.slimScrollDiv{width:41%!important;}
.media {background:#fff; position:relative; margin-bottom:15px;}
.media img{width:200px;margin:0; height:136px;}
.media-body{border:1px solid #bcbcbc; border-left:0; height:136px;}
.media .price{float:left; width:100%; font-size:30px;font-weight:600; color:#4765AB;}
.media .price small{display:block; font-size:17px; color:#232323;}
.media .stats{float:left; width:100%; margin-top:10px;}
.media .stats span{float:left; margin-right:10px; font-size:15px;}
.media .stats span i{margin-right:7px; color:#4765AB;}
.media .address{float:left; width:100%;font-size:14px; margin-top:5px; color:#888;}
.media .fav-box{position:absolute; right:10px; font-size:20px; top:4px; color:#E74C3C;}
.map-box{background-color:#A3CCFF;}
