Bootdey

Bootstrap snippet and html example. Real state item list

Bootstrap 3.3.4 snippet "Real state item list" with HTML, CSS, and JS. Copy, paste, and customize this responsive UI component for your project.
Tags: real state,item,list

Preview HTML CSS
Share on facebook Share on X

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.4 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippets bootdey">
    <div class="row">
    <div class="col-md-8">
        <ul class="list-listings">
            <li class="featured">
                <div class="listing-header bg-base">
                    Featured listing
                </div>
                <div class="listing-image">
                    <img src="https://www.bootdey.com/image/300x300/4682B4/000000" class="img-responsive" alt="">
                </div>
                <div class="listing-body">
                    <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt.
                    </p>
                    <div class="meta-info">
                        <ul>
                            <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li>
                            <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li>
                            <li><i class="fa fa-comment"></i> <small>10 comments</small></li>
                            <li class="stretch text-right"><a href="#" class="">Read more</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="">
                <div class="listing-image">
                    <img src="https://www.bootdey.com/image/300x300/FFA07A/000000" class="img-responsive" alt="">
                </div>
                <div class="listing-body">
                    <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt.
                    </p>
                    <div class="meta-info">
                        <ul>
                            <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li>
                            <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li>
                            <li><i class="fa fa-comment"></i> <small>10 comments</small></li>
                            <li class="stretch text-right"><a href="#" class="">Read more</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="">
                <div class="listing-image">
                    <img src="https://www.bootdey.com/image/300x300/20B2AA/000000" class="img-responsive" alt="">
                </div>
                <div class="listing-body">
                    <h3><a href="#">Fortitor Posuere &amp; Praesent Metus Ins</a></h3>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt, Ut tincidunt purus iaculis ipsum dctum non dtum quam consectetur adipisg elitm Ut tincidunt.
                    </p>
                    <div class="meta-info">
                        <ul>
                            <li><i class="fa fa-calendar"></i> <small>23 July 2014</small></li>
                            <li><i class="fa fa-user"></i> <small>By <a href="#">Alex Smith</a></small></li>
                            <li><i class="fa fa-comment"></i> <small>10 comments</small></li>
                            <li class="stretch text-right"><a href="#" class="">Read more</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul> 
    </div>
  </div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.4 to keep the design, spacing, and responsiveness consistent.

ul.list-listings {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}

ul.list-listings>li {
  margin-bottom: 30px;
  border: 1px solid #e0eded;
  border-radius: 2px;
}

ul.list-listings .listing-image {
  width: 30%;
  display: table-cell;
}

ul.list-listings .listing-image img {
  border-bottom-left-radius: 2px;
}

ul.list-listings .listing-body {
  padding: 10px 15px;
  display: table-cell;
  vertical-align: top;
}

ul.list-listings .listing-body h3 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
}

ul.list-listings .listing-body p {
  margin: 5px 0;
}

ul.list-listings .listing-body .meta-info {
  border-top: 1px solid #e0eded;
  padding-top: 7px;
}

ul.list-listings .listing-body .meta-info ul {
  width: 100%;
  display: table;
  table-layout: auto;
}

ul.list-listings .listing-body .meta-info ul li {
  display: table-cell;
  border-right: 1px solid #e0eded;
  text-align: center;
}

ul.list-listings .listing-body .meta-info ul li i {
  color: #333;
  margin-right: 5px;
}

ul.list-listings .listing-body {
  padding: 10px 15px;
  display: table-cell;
  vertical-align: top;
}

.bg-base {
  background: #3498db;
  color: #fff;
}

ul.list-listings>li.featured {
  border-color: #3498db;
}

ul.list-listings>li {
  margin-bottom: 30px;
  border: 1px solid #e0eded;
  border-radius: 2px;
}

ul.list-listings>li:before, ul.list-listings li:after {
  content: "";
  display: table;
}

ul.list-listings .listing-header {
  display: block;
  clear: both;
  padding: 8px 15px;
  font-weight: 600;
  text-transform: uppercase;
}

Similar snippets

Find more similar snippets using the following tags:real state,item,list

Bootstrap example and template. bs4 timeline

bs4 timeline

View
Bootstrap example and template. Google choose an account style

Google choose an account style

View
Bootstrap example and template. zig zag user description

zig zag user description

View
Bootstrap example and template. bs4 Trending Articles

bs4 Trending Articles

View
Bootstrap example and template. bs5 dark footer

bs5 dark footer

View
Bootstrap example and template. Chat box

Chat box

View
Bootstrap example and template. messages chat widget

messages chat widget

View
Bootstrap example and template. Carousel with face indicators by Bootstheme club

Carousel with face indicators by Bootstheme club

View

FAQ

How do I use this snippet?

Include Bootstrap 3.3.4, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.

Can I use it in commercial projects?

Yes. It’s free for personal and commercial work; check the snippets license for details.

Is it responsive?

Yes. It inherits the responsive grid and components from Bootstrap 3.3.4.

Bootstrap example and template. Real state item list

About this bootstrap example/template

This free Bootstrap 3.3.4 snippet, Real state item list, was published on May 10th 2015, 01:07 by Bootdey Admin.

Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.

Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.

Already trusted in 9.4K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.

Bootstrap 3.3.4

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

This code example is based on bootstrap 3.3.4 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working

  1. Home
  2. Bootstrap Snippets
  3. real state
  4. Bootstrap html snippet. Real state item list