Bootstrap 3 Horizontal scrollable row Website Design

Question

I am trying to make a horizontal scroll web page using bootstrap 3. This is what I have tried so far.

@media (min-width:768px) {
.container {
width:100%;
}
#mai         


        

Answer 1

Finally, I was able to get what I wanted through a CSS-only method.

@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;
    white-space:normal;
    vertical-align:top;
  }
}

Added float:none and display:inline-block to col- classes to get it to work.

You can see the working example here. I added niceScroll() to get the perfect look. Edit is here.