Bootstrap snippet: Real state item list

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: real state,item,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-8"> <ul class="list-listings"> <li class="featured"> <div class="listing-header bg-base"> Featured listing </div> <div class="listing-image"> <img src="http://lorempixel.com/300/300/nature/5/" class="img-responsive" alt=""> </div> <div class="listing-body"> <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt. </p> <div class="meta-info"> <ul> <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li> <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li> <li><i class="fa fa-comment"></i> <small>10 comments</small></li> <li class="stretch text-right"><a href="#" class="">Read more</a></li> </ul> </div> </div> </li> <li class=""> <div class="listing-image"> <img src="http://lorempixel.com/300/300/nature/1/" class="img-responsive" alt=""> </div> <div class="listing-body"> <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt. </p> <div class="meta-info"> <ul> <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li> <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li> <li><i class="fa fa-comment"></i> <small>10 comments</small></li> <li class="stretch text-right"><a href="#" class="">Read more</a></li> </ul> </div> </div> </li> <li class=""> <div class="listing-image"> <img src="http://lorempixel.com/300/300/nature/2/" class="img-responsive" alt=""> </div> <div class="listing-body"> <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt. </p> <div class="meta-info"> <ul> <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li> <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li> <li><i class="fa fa-comment"></i> <small>10 comments</small></li> <li class="stretch text-right"><a href="#" class="">Read more</a></li> </ul> </div> </div> </li> </ul> </div> </div> </div>
ul.list-listings { margin: 0 0 20px 0; padding: 0; list-style: none; } ul.list-listings>li { margin-bottom: 30px; border: 1px solid #e0eded; border-radius: 2px; } ul.list-listings .listing-image { width: 30%; display: table-cell; } ul.list-listings .listing-image img { border-bottom-left-radius: 2px; } ul.list-listings .listing-body { padding: 10px 15px; display: table-cell; vertical-align: top; } ul.list-listings .listing-body h3 { margin: 0; padding: 0; font-size: 18px; font-weight: 500; line-height: 25px; } ul.list-listings .listing-body p { margin: 5px 0; } ul.list-listings .listing-body .meta-info { border-top: 1px solid #e0eded; padding-top: 7px; } ul.list-listings .listing-body .meta-info ul { width: 100%; display: table; table-layout: auto; } ul.list-listings .listing-body .meta-info ul li { display: table-cell; border-right: 1px solid #e0eded; text-align: center; } ul.list-listings .listing-body .meta-info ul li i { color: #333; margin-right: 5px; } ul.list-listings .listing-body { padding: 10px 15px; display: table-cell; vertical-align: top; } .bg-base { background: #3498db; color: #fff; } ul.list-listings>li.featured { border-color: #3498db; } ul.list-listings>li { margin-bottom: 30px; border: 1px solid #e0eded; border-radius: 2px; } ul.list-listings>li:before, ul.list-listings li:after { content: ""; display: table; } ul.list-listings .listing-header { display: block; clear: both; padding: 8px 15px; font-weight: 600; text-transform: uppercase; }
Dey-Dey

Real state item list

Dey-Dey
  Jun 10th 2015, 09:27
2.8K Views