Bootstrap snippet: Real State Property Column

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



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row bootstrap snippets" id="real-estates-columns"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/2/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/3/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/5/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/6/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/7/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <a href="#"><img src="http://lorempixel.com/300/300/city/8/" class="img-responsive"></a> <div class="title-realestates-columns"> <h4><a href="#"><strong>Omah Gedong Apik BGT</strong></a></h4> <small class="label label-warning"><i class="fa fa-dot-circle-o" data-original-title="" title=""></i> $2,989</small> <hr> <p>Nah nek iki lagi larang soale apik-apik barange tur aku ra iso tuku wong karang jeh ngumpulke gawe nikah kie.</p> </div> <div class="footer-realestates-columns"> <div class="row"> <div class="col-sm-6"> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-thumb-tack" data-original-title="" title=""> 2 Bedroom</i></a> <a href="#" class="btn btn-default btn-block" data-original-title="" title=""><i class="fa fa-female" data-original-title="" title=""></i> 2 Bathroom</a> </div> <div class="col-sm-6"> <a href="#" class="btn btn-primary btn-block" data-original-title="" title="">Apply to Rent</a> <a href="#" class="btn btn-danger btn-block" data-original-title="" title="">Favorite</a> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; background-color: #f2f2f2; } #real-estates-columns .title-realestates-columns h4 a { color: #1abc9c; font-weight: 300; font-size: 18pt; text-decoration: none; } #real-estates-columns .btn.btn-default { border-color: #bdc3c7; background-color: #bdc3c7; border: 1px solid #bdc3c7; } #real-estates-columns img { border: 5px solid #ecf0f1; width: 100%; height: 300px; margin-bottom: 10px; }
Dey-Dey

Real State Property Column

Dey-Dey
  May 19th, 09:36
1.6K Views