Bootstrap snippet: Real State Property 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



<div class="row bootstrap snippets" id="property-list"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/200/200/city/2/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-real-estates"> <strong><a href="#">Property 1</a></strong> <span class="pull-right">$12,990</span> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p><span class="label label-danger">1,292 SqFt</span> | <span class="label label-danger">3 Beds</span> | <span class="label label-danger">4 Baths</span></p> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/200/200/city/4/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-real-estates"> <strong><a href="#">Property 2</a></strong> <span class="pull-right">$12,990</span> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p><span class="label label-danger">1,292 SqFt</span> | <span class="label label-danger">3 Beds</span> | <span class="label label-danger">4 Baths</span></p> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/200/200/city/4/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-real-estates"> <strong><a href="#">Property 3</a></strong> <span class="pull-right">$12,990</span> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p><span class="label label-danger">1,292 SqFt</span> | <span class="label label-danger">3 Beds</span> | <span class="label label-danger">4 Baths</span></p> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/200/200/city/2/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-real-estates"> <strong><a href="#">Property 4</a></strong> <span class="pull-right">$12,990</span> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p><span class="label label-danger">1,292 SqFt</span> | <span class="label label-danger">3 Beds</span> | <span class="label label-danger">4 Baths</span></p> </div> </div> </div> </div> </div> </div>
body { background-color: #f2f2f2; margin-top:20px; } .panel { border-color: #fff; } #property-list img { width: 100%; height: 170px; border: 5px solid #ecf0f1; margin-bottom: 7px; } .label-danger { background-color: #d9534f; } #property-list h4.title-real-estates a { color: #f39c12; } #property-list h4.title-real-estates a:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; color: #f1c40f; } #property-list h4 span { color: #f1c40f; }
Dey-Dey

Real State Property List

Dey-Dey
  May 31st, 13:04
2.0K Views