"listing view"
Bootstrap 3.0.0 Snippet by jeevan123456

<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; }

Related: See More


Questions / Comments: