<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;}