Real State Property Column

This bootstrap snippet called "Real State Property Column" 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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 21:15

Views: 2.8K

Rated 5/5 based on 1 reviews