<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>
</div>
<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>How to find google fonts</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="#!"><i class="fa fa-phone" aria-hidden="true"></i> Get Quotes</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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;
display: inline-block;
line-height: 18pt;
color: #343c42;
font-weight: 400;
list-style-type: none;
width: 100%;
box-sizing: border-box;
}
.listing-enquiry-sec ul li a {
margin-right: .052083333in;
color: #3e4c56;
padding: 3.75pt;
text-align: center;
font-weight: 600;
border-radius: .020833333in;
margin-left: 3pt;
margin-right: 3pt;
margin-top: 3pt;
margin-bottom: 5pt;
box-sizing: border-box;
display: block;
text-align: center;
border-image: none;
border-color: #d6d1d1;
border-style: solid;
border-top-width: .75pt;
border-bottom-width: .75pt;
border-left-width: 1pt;
border-right-width: .75pt;
outline: none;
transition: all .5s ease;
}
.listing-enquiry-sec ul li a:hover {
color: red;
list-style-type: none;
}
.listing-title h3 {
font-size: 1.5pc;
padding-top: .3125pc;
padding-bottom: 6pt;
color: #000;
font-weight: 700;
}
.item-listing {
margin-top:15px;
}
.item-listing:hover {
background-color : #fff;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition: box-shadow .25s;
}
@media screen and ( min-width: 600px ) {
.listing-enquiry-sec ul li {
width: 25%;
}
}
[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;
}
