real state dashboard

This bootstrap snippet called "real state dashboard" 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

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

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:#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%;
  }
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 9th 2016, 10:54

Views: 224