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="" rel="stylesheet">
<div id="main">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                Real Estates Detail

    <!-- 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 class="panel-body">
                    <div class="text-center" id="author">
                        <img src="">
                        <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>
        <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>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade active in" id="photos">
                            <div class="flexslider">    
                                <img src="" draggable="false">
                        <div class="tab-pane fade" id="detail">
                            <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">
                                    <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>
                        <div class="tab-pane fade" id="contact">
                            <form role="form">
                                <div class="form-group">
                                    <label>Full name</label>
                                    <input type="text" class="form-control rounded" placeholder="Enter full name">
                                <div class="form-group">
                                    <label>Phone number</label>
                                    <input type="text" class="form-control rounded" placeholder="(000)0000000">
                                <div class="form-group">
                                    <label>Email address</label>
                                    <input type="email" class="form-control rounded" placeholder="Enter email">
                                <div class="form-group">
                                    <div class="checkbox">
                                            <input type="checkbox"> Buy this property
                                <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 class="form-group">
                                    <button type="submit" class="btn btn-danger" data-original-title="" title="">Send message</button>

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


#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