"showroom location"
Bootstrap 3.3.0 Snippet by jeevan123456

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="site-panel"> <div class="container"> <div class="row"> <div class="col-md-3 sidebar well"> </div> <div class="col-md-9 content-box"> <div class="well"> <div class="row gaadiexpert-title-area"> <div class="col-md-12"> <div class="site-title"> <h3>Audi Showrooms in </h3> <hr> </div> </div> </div> <div class="row text-center"> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>New Delhi</h4> </a> </div> </div> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>Mumbai</h4> </a> </div> </div> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>Banglore</h4> </a> </div> </div> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>Jaipur</h4> </a> </div> </div> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>Ahemedabad</h4> </a> </div> </div> <div class="col-md-2 showroom-location-area "> <div class="showroom-location-box"> <a href="#"> <img class="img-responsive" src="https://image.flaticon.com/icons/svg/149/149228.svg"> <h4>Patna</h4> </a> </div> </div> </div> <hr> <button type ="button" class="btn btn-warning">See All Locations</button> </div> <div class="well"> <div class="row gaadiexpert-title-area"> <div class="col-md-12"> <div class="site-title"> <h3>Useful Links </h3> <hr> </div> </div> </div> <div class="row text-center"> <div class="col-md-3 useful-links-area "> <div class="useful-links-box"> <a href="#"> <i class="fa fa-car"></i> <p>Cars Above 10 Lakh</p> </a> </div> </div> <div class="col-md-3 useful-links-area "> <div class="useful-links-box"> <a href="#"> <i class="fa fa-car"></i> <p>Cars Above 10 Lakh</p> </a> </div> </div> <div class="col-md-3 useful-links-area "> <div class="useful-links-box"> <a href="#"> <i class="fa fa-car"></i> <p>Cars Above 10 Lakh</p> </a> </div> </div> <div class="col-md-3 useful-links-area "> <div class="useful-links-box"> <a href="#"> <i class="fa fa-car"></i> <p>Cars Above 10 Lakh</p> </a> </div> </div> </div> </div> </div> </div> </div> </div>
.well {background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px; border-radius: 2px;} .showroom-location-area {background:#f9f9f9;padding:20px;border-right:1px solid #e2e2e2;} .showroom-location-area:hover {background:#dd0000;color:#fff;}

Related: See More


Questions / Comments: