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%;
}
#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

score 18 · Accepted Answer · edited Jan 12 '16 at 01:06

18

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.

edited Jan 12 '16 at 01:06

Nikita Pestrov

5,876
4
31
66

answered Dec 02 '13 at 18:29

Ravimallya

6,550
2
41
75

1

Add ***vertical-align:top;*** into *** #main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] { *** to be perfect ;) – Remi Thomas Jul 17 '14 at 20:09
2

I published a CSS file which adds a `.row-horizon` class to allow for horizontal scrolling and also overrides bootstrap's .col-*-* classes to make the baseline width 90% instead of 100% which allows a small portion of the last column to be displayed. https://github.com/FluidApps/bootstrap-horizon – Pier-Luc Gendreau Dec 23 '14 at 21:40
@Pier-LucGendreau that's great! however, it would be better, if you could please add a link to this SO question in your github project. – Ravimallya Dec 25 '14 at 06:55
Yes! I do. check my SO profile. Though it's not an active project repo... Just for R-n-D. – Ravimallya Dec 26 '14 at 07:38
@Ravimallya nicescroll does not works for horizontal scroll in mobile. – Steeve Mar 06 '17 at 18:50
@Steeve I've not checked the nice scroll's functionality in mobile device. Moreover, the nicescroll is no longer required for mobile. You can use media queries to apply the nice scroll according to device width. – Ravimallya Mar 07 '17 at 05:12

Bootstrap 3 Horizontal scrollable row Website Design

1 Answers1

Linked