Real state item list

Bootstrap snippet. Real state item list, 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,item,list

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <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://lorempixel.com/300/300/nature/5/" 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://lorempixel.com/300/300/nature/1/" 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://lorempixel.com/300/300/nature/2/" 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

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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

Bootstrap snippet bs4 project list with progress

bs4 project list with progress

View

Bootstrap snippet bs4 account tickets

bs4 account tickets

View

Bootstrap snippet bs4 shop cart

bs4 shop cart

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 10th 2015, 01:07

Views: 4.0K

Rated 5/5 based on 4 reviews