real state dashboard

Bootstrap snippet. real state dashboard, this snippet 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">
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">21 forest view dr, san francisco, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/2.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$478,000</span>
                        <span class="text-right text-muted">Multi Family</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">3</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">3</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">3540</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">6570</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">1602 oakwood dr, modesto, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/3.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$351,500</span>
                        <span class="text-right text-muted">Multi Family</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">3</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">2</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">1390</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">9800</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">225 rosemont ave, modesto, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/4.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$678,000</span>
                        <span class="text-right text-muted">Single Family</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">4</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">2</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">4890</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">15400</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">215 olivero rd, modesto, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$430,000 /month</span>
                        <span class="text-right text-muted">Condo/Apartment</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">2</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">1</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">2450</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">10890</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">3623 McKinley blvd, sacramento, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/5.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$1,600 /month</span>
                        <span class="text-right text-muted">Condo/Apartment</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">2</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">1</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">4370</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">12980</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="real-estate-quick-view shadow">
            <h3 class="title text-capitalize"><a href="#">1124 perkins way, sacramento, CA</a></h3>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/6.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">
                        <span class="text-right text-strong">$475,000</span>
                        <span class="text-right text-muted">Single Family</span>
                    </h3>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <td class="text-left">Beds</td>
                            <td class="text-right">6</td>
                        </tr>
                        <tr>
                            <td class="text-left">Baths</td>
                            <td class="text-right">4</td>
                        </tr>
                        <tr>
                            <td class="text-left">Square feet</td>
                            <td class="text-right">3678</td>
                        </tr>
                        <tr>
                            <td class="text-left">Lot size</td>
                            <td class="text-right">16900</td>
                        </tr>
                        </tbody>
                    </table>
                </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{margin-top:20px;
background:#eee;
}


/* ========================================================================
 * DASHBOARD REAL ESTATE
 * ======================================================================== */
.list-real-estate {
  position: relative;
  margin: 0;
}
.list-real-estate li {
  padding: 10px 0;
  border-bottom: 1px dashed #DDD;
}
.list-real-estate li:first-child {
  padding-top: 0;
}
.list-real-estate li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.list-real-estate li a {
  text-decoration: none;
}
.list-real-estate li a p {
  margin: 0;
  color: #B3B3B3;
  text-transform: uppercase;
  font-weight: 300;
}
.list-real-estate li a h3 {
  margin: 3px 0 0 0;
  color: #333;
  font-size: 20px;
  font-weight: 300;
}
.list-real-estate li a h3 .counter {
  font-size: 20px !important;
}
.list-real-estate li a h3 span {
  font-size: 15px;
}
.list-real-estate li a .status i {
  font-size: 25px;
  margin-top: 15px;
}

.sales-price {
  margin: 10px 0;
}

.ct-series-a .ct-line {
  stroke: #8CC152;
}
.ct-series-a .ct-point {
  stroke: #4b6d27;
}
.ct-series-a .ct-area {
  fill: #4b6d27;
}

.real-estate-quick-view {
  position: relative;
  background-color: #ffffff;
  padding: 10px;
  margin-bottom: 20px;
}
.real-estate-quick-view .title {
  margin-top: 0;
  font-size: 15px;
  font-weight: bold;
}
.real-estate-quick-view .title a {
  color: #636E7B;
}
.real-estate-quick-view .media {
  margin-top: 10px;
}
.real-estate-quick-view .media .media-heading {
  font-size: 10px;
  text-align: right;
}
.real-estate-quick-view .media .media-heading span {
  display: block;
}
.real-estate-quick-view .table tbody tr td {
  font-size: 10px;
}

@media (max-width: 360px) {
  .ct-label.ct-horizontal.ct-end {
    font-size: 7px;
  }
}
@media (max-width: 320px) {
  .real-estate-quick-view .title {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
  }

  .media-body, .media-left, .media-right {
    display: block;
  }

  .media-left {
    text-align: center;
    margin-bottom: 20px;
  }

  .media-body {
    width: 100%;
  }
}

                                    

Similar snippets

Bootstrap snippet Real Estates Property Detail

Real Estates Property Detail

View

Bootstrap snippet Real State Property List

Real State Property List

View

Bootstrap snippet Real State Property Column

Real State Property Column

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 9th 2016, 10:54

Views: 240