bootstrap 3 horizontal scroll website

by Abid Shaik

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.plus.js"></script>
  <!-- bootstrap 3 horizontal scroll website -->
  <div class="container" id="main-content">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
           <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-4 col-xs-12">
                <div class="ad">ASDF </div>
            </div>
        </div>
               
    </div>

CSS

/* Sticky footer styles  */
 html, body, container {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
.ad{
  height: 500px;
}
@media (min-width:768px) {
.container {
width:100%;
}
#main-content{
     min-height: 100%;
    height: auto; 
   
}
#main-content > .row {
 overflow-x:scroll;
     overflow-y:hidden;
    white-space:nowrap;
}    
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
}
}

JavaScript

$(function() { 

    $("#main-content > .row").niceScroll();
    $(".row").niceScroll();

  }

);