Real State Property List

This bootstrap snippet called "Real State Property List" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: real state

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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="https://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="https://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="https://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="https://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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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

Similar snippets

Bootstrap snippet Real Estates Property Detail

Real Estates Property Detail

View

Bootstrap snippet Real State Property Column

Real State Property Column

View

Bootstrap snippet Real state item list

Real state item list

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 21:03

Views: 3.9K

Rated 5/5 based on 8 reviews