Real Estates Property Detail

This bootstrap snippet called "Real Estates Property Detail" 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 id="main">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                Real Estates Detail
            </h2>
        </div>
    </div>

    <!-- start:real estates detail -->
    <div class="row" id="real-estates-detail">
        <div class="col-lg-4 col-md-4 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <header class="panel-title">
                        <div class="text-center">
                            <strong>Agent</strong> Author<strong>.</strong>
                        </div>
                    </header>
                </div>
                <div class="panel-body">
                    <div class="text-center" id="author">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png">
                        <h3>John Doe</h3>
                        <small class="label label-warning">From USA</small>
                        <p>Aku kie sing sok ngedolke omah-omah kae, yo iso di omongke makelar ngono sih. Tapi makelar nek payu ne akeh yo dadi sugih bro. Tenanan ra ngapusi.</p>
                        <p class="sosmed-author">
                            <a href="#"><i class="fa fa-facebook" title="Facebook"></i></a>
                            <a href="#"><i class="fa fa-twitter" title="Twitter"></i></a>
                            <a href="#"><i class="fa fa-google-plus" title="Google Plus"></i></a>
                            <a href="#"><i class="fa fa-linkedin" title="Linkedin"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12">
            <div class="panel">
                <div class="panel-body">
                    <ul id="myTab" class="nav nav-pills">
                        <li class="active"><a href="#photos" data-toggle="tab">Photos</a></li>
                        <li class=""><a href="#detail" data-toggle="tab">Detail</a></li>
                        <li class=""><a href="#contact" data-toggle="tab">Contact</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade active in" id="photos">
                            <br>
                            <div class="flexslider">    
                                <img src="http://bootemplates.com/themes/srikandi/v2/img/content/thumbnail5.jpg" draggable="false">
                            </div>
                        </div>
                        <div class="tab-pane fade" id="detail">
                            <p></p>
                            <h4>Short Detail</h4>
                            <p>Iki mung detail singkat wae soale seko jenenge wae wis short detail dadi yo ojo dowo-dowo.</p>
                            <table class="table table-th-block">
                                <tbody>
                                    <tr><td class="active">Bedrooms:</td><td>5 beds</td></tr>
                                    <tr><td class="active">Bathrooms:</td><td>2 baths</td></tr>
                                    <tr><td class="active">Single Family:</td><td>2,957 sq ft</td></tr>
                                    <tr><td class="active">Lot:</td><td>0.26 acres</td></tr>
                                    <tr><td class="active">Year Built:</td><td>1998</td></tr>
                                    <tr><td class="active">Last Sold:</td><td>Apr 1998 for $225,000</td></tr>
                                    <tr><td class="active">Heating Type:</td><td><a href="#">Contact for details</a></td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="contact">
                            <p></p>
                            <form role="form">
                                <div class="form-group">
                                    <label>Full name</label>
                                    <input type="text" class="form-control rounded" placeholder="Enter full name">
                                </div>
                                <div class="form-group">
                                    <label>Phone number</label>
                                    <input type="text" class="form-control rounded" placeholder="(000)0000000">
                                </div>
                                <div class="form-group">
                                    <label>Email address</label>
                                    <input type="email" class="form-control rounded" placeholder="Enter email">
                                </div>
                                <div class="form-group">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> Buy this property
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Message to agent</label>
                                    <textarea class="form-control rounded" style="height: 100px;"></textarea>
                                    <p class="help-block">Please be polite and professional</p>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-danger" data-original-title="" title="">Send message</button>
                                </div>
                            </form>
                        </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;}


#main {
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: -55px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border-bottom: 4px solid #ddd;
}


#real-estates-detail #author img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    border: 5px solid #ecf0f1;
    margin-bottom: 10px;
}

#real-estates-detail .sosmed-author i.fa {
    width: 30px;
    height: 30px;
    border: 2px solid #bdc3c7;
    color: #bdc3c7;
    padding-top: 6px;
    margin-top: 10px;
}

.panel-default .panel-heading {
    background-color: #fff;
}

#real-estates-detail .slides li img {
    height: 450px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 21:42

Views: 2.5K

Rated 5/5 based on 3 reviews