Bootstrap 3 Horizontal scrollable row Website Design

css, horizontal-scrolling, jquery, twitter-bootstrap-3

Solution

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.

Problem

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%; } #main-content{ min-height: 100%; height: auto; } #main-content > .row { overflow-x:scroll; overflow-y:hidden; } #main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] { float:left; } ``` I tried with the jquery method which mentioned in this thread but it is not scrolling even after the width has been set to `row` class, the `col-lg` classes as displayed here. I also tried to set height to `row` class by getting the height of `col-lg-` height, but still not succeeded. What I wanted to achieve is: - col-lg-, col-md- and col-sm- classes should need to be scrolled with it's respective width content. the number of cols may vary according to the data. - In col-xs, there is no change in the default behavior. http://jsfiddle.net/ravimallya/7kCTD/3/ this is the work place. Can anyone suggest a workaround? css, jquery

Original source

Related problems