Bootstrap Snippet card for real estate using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6">
           <div class="thumbnail img-thumb-bg">
               <div class="overlay"></div>
               <div class="caption">
                   <div class="tag"><a href="#">Real Estate</a></div>
                   <div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
                   <div class="clearfix">
                       <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
                       <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
                   </div>
                   <div class="content">
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
                   </div>
               </div>
           </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6">
           <div class="thumbnail img-thumb-bg">
               <div class="overlay"></div>
               <div class="caption">
                   <div class="tag"><a href="#">Real Estate</a></div>
                   <div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
                   <div class="clearfix">
                       <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
                       <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
                   </div>
                   <div class="content">
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
                   </div>
               </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  padding: 10px 0;
  background-color: #f4f4f4;
  font-family: 'Montserrat', sans-serif;
}
a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
  text-decoration: none;
}
.btn {
  text-transform: uppercase;
}
.btn.btn-lg {
  padding: 6px 30px;
}
.thumbnail-title {
  font-size: 20px;
  margin-top: 5px;
}
.img-thumb-bg {
  padding: 0;
  overflow: hidden;
  min-height: 200px;
  position: relative;
  border-radius: 3px;
  background-position: center;
  background-color: transparent;
  background-image: url('http://projects.mostlikers.com/_images/estate-image.jpg');
}
.img-thumb-bg p {
  color: #fff;
  margin-bottom: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card for real estate"
Bootstrap 3.3.0 Snippet by mhernan10

Related: See More

Questions / Comments:

"card for real estate" Bootstrap 3.3.0 Snippet by mhernan10

Related: See More

Questions / Comments:

"card for real estate"
Bootstrap 3.3.0 Snippet by mhernan10