Bootstrap 3 Horizontal Scrolling Line 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%; } #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 using the jquery method mentioned in this , but it does not scroll even after the width has been set to the row class, col-lg classes displayed here .

I also tried setting the height to the row class, getting the col-lg- height, but still did not succeed .

I would like to achieve:

• col-lg-, col-md- and col-sm classes need to be scrolled with the appropriate width content. the number of columns may vary depending on the data.
• In col-xs, no default changes are observed.

http://jsfiddle.net/ravimallya/7kCTD/3/ this is the workplace. Can anyone suggest a workaround? css jquery

Answer 1

Finally, I was able to get what I wanted using only the CSS 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 classes float:none and display:inline-block in col- to make it work.

Here you can see a working example here . I added niceScroll() to get a great view. Change here .