"Real Estate Media Listings"
Bootstrap 3.1.0 Snippet by botaohu

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container-fluid" style="background-color:#e8e8e8"> <div class="container container-pad" id="property-listings"> <!-- Begin Listing: 609 W GRAVERS LN--> <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing"> <div class="media"> <a class="pull-left" href="#" target="_parent"> <img alt="image" class="img-responsive" src="http://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg" ></a> <div class="clearfix visible-sm"></div> <div class="media-body fnt-smaller"> <a href="#" target="_parent"></a> <h4 class="media-heading"> <a href="#" target="_parent"><span class="label label-danger">Danger</span> Canon EOS 5D Mark III 22.3 MP Digital SLR Camera - Black (Body Only) <p class="pull-right">$1,0000</p></a></h4> <ul class="list-inline mrg-0 btm-mrg-10 clr-535353"> <li>$10000</li> <li style="list-style: none">|</li> <li>3 days</li> <li style="list-style: none">|</li> <li>amber (90999) 99% pos</li> <li style="list-style: none">|</li> <li>East Brunswick,NJ,USA</li> <li style="list-style: none">|</li> <li> Used </li> </ul> <span class="fnt-smaller fnt-lighter fnt-arial">East Brunswick,NJ,USA, Used</span> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/bootstrap/images/64.jpg" alt="Media Object"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </div> </div><!-- End Listing--> </div><!-- End container --> </div>
/**** BASE ****/ body { color: #888; } a { color: #03a1d1; text-decoration: none!important; } /**** LAYOUT ****/ .list-inline>li { padding: 0 10px 0 0; } .container-pad { padding: 30px 15px; } /**** MODULE ****/ .bgc-fff { background-color: #fff!important; } .box-shad { -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2); box-shadow: 1px 1px 0 rgba(0,0,0,.2); } .brdr { border: 1px solid #ededed; } /* Padding - Margins */ .pad-10 { padding: 10px!important; } .mrg-0 { margin: 0!important; } .btm-mrg-10 { margin-bottom: 10px!important; } .btm-mrg-20 { margin-bottom: 20px!important; } @media only screen and (min-width: 992px) { #property-listings .property-listing img { max-width: 180px; } }

Related: See More


Questions / Comments: