"listing view"
Bootstrap 3.0.0 Snippet by jeevan123456

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-md-3">
<h2> Sidebar goes here</h2>
</div>
<div class="col-md-9">
<div class="item-listing bg-grey">
<div class="container">
<div class="row">
<div class="col-md-4"> <img src="http://rn53themes.net/themes/demo/directory/images/services/s1.jpeg" alt="">
</div>
<div class="col-md-8 listing-title"> <a href="listing-details.html"><h3>World Best Local Directory</h3></a>
<h4>Express Avenue Mall, Los Angeles</h4>
<p><b>Address:</b> 28800 Orchard Lake Road, Suite 180 Farmington Hills, U.S.A.</p>
<div class="listing-number ">
<ul>
<li><img src="images/icon/phone.png" alt=""> +01 1245 2541, +62 6541 6528</li>
<li><img src="images/icon/mail.png" alt=""> localdir@webdir.com</li>
</ul>
</div>
<div class="listing-enquiry-sec">
<ul>
<li><a href="#!"><i class="fa fa-star-o" aria-hidden="true"></i> Write Review</a> </li>
<li><a href="#!"><i class="fa fa-commenting-o" aria-hidden="true"></i> Send SMS</a> </li>
<li><a href="#!"><i class="fa fa-phone" aria-hidden="true"></i> Call Now</a> </li>
<li><a href="#!" data-dismiss="modal" data-toggle="modal" data-target="#list-quo"><i class="fa fa-usd" aria-hidden="true"></i> Get Quotes</a> </li>
</ul>
</div>
</div>
</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
img{width:100%;}
.bg-grey {
background-color: #f2f2f2;
}
a {
color : red;
}
a:hover {
color : brown;
}
.listing-number{
width: 100%;
}
.listing-number li {
display: inline-block;
list-style-type: none;
overflow: hidden;
position: relative;
width: 50%;
float: left;
color: #636363;
}
.listing-enquiry-sec {
width: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.listing-enquiry-sec ul {
padding:0pt;
}
.listing-enquiry-sec ul li {
margin: 0in;
float: left;
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
[class~="list-enqu-btn"] ul li a:hover {
border-top-color: #172233;
}
img{width:80%;}
.small-padding-bg {
box-shadow: 3px 3px 5px #c2c2c2, -3px -3px 5px #c2c2c2;
}
.list-number li {
margin-right: 5px;
margin-left: 0px;
top: 5px;
display:inline-block;
}
.list-enqu-btn li {
margin-right: 5px;
margin-left: 0px;
margin-bottom:5px;
top: 15px;
display:inline-block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: