TW Bootstrap: How to overflow columns

Question

I want to have a row where columns are going to be horizontally scrollable:

scrollable columns in a single row in twitter bootstrap

As you can see the row is the outer block (with padding). Inside of it, there are columns where each has some span* class such as span3. And since all of the columns do not fit in the row, the scrollbar is on the bottom.

Here is what I tried doing (with inline css) and so far no luck.

<div class="row">

<!-- the parent element which will have scrollbar -->
<div class="span12" style="white-space: nowrap; overflow-x: auto;">

<div class="row">

<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
...

<div>

</div>

</div>

But then the columns just wrap once they can't fit into the row. How can I do this?

Thank you.

Sherbrow · Accepted Answer · 2015-07-08T22:48:27.180

20

Updated

I guess you just missed the float: none; : float forces display: block;.

Live demo (jsfiddle)

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: auto;
    white-space: nowrap;
}
div.myClass [class*="col"], /* TWBS v3 */
div.myClass [class*="span"] {  /* TWBS v2 */
    display: inline-block;
    float: none; /* Very important */
}

Anyway this is not because you can do it that you should. There are things like carousels that can achieve this kind of effects.

IMHO a web page is originally meant to be horizontally scrolled whereas JavaScript can do anything.

edited Jul 08 '15 at 22:48

answered Jul 04 '12 at 18:05

Sherbrow

17,279
3
64
77

Ill give it a try. Why `pre` tag? – miki725 Jul 04 '12 at 20:05
1

thanx. It works perfectly!. I made a fiddle with the solution. In there if everything fits, then no scollbars appear, otherwise scollbars appears. I was missing `float: none` which you pointed out. http://jsfiddle.net/miki725/9Ndjw/ – miki725 Jul 04 '12 at 21:03
@Sherbrow is it possible to have the horizontal scroll to respond to user swipe gestures rather than controlling the scroll bar, also I wouldn't want the scroll bar to be visible – Anand Sunderraman Aug 01 '12 at 07:36
I was trying to solve the same problem and this worked like a charm...thanks. – Babak Naffas Mar 12 '13 at 20:03
works great! updated with latest bootstrap 3 (3.3.5 at the time of this writing): http://jsfiddle.net/s3logic/ou9er1n7/ – Jordan Jul 07 '15 at 18:48
I know this is an old answer but I can't help wondering, why should a page be scrolled horizontally? If you write a basic html page with no html or css it would be scrolled vertically. – MahdiPOnline Sep 01 '17 at 14:09

score 3 · Answer 2 · answered Jul 27 '16 at 18:07

I took it a bit further. Scrollable horizontal columns!

   div.h-scrollable {
overflow-x: auto;
white-space: nowrap; 
}



 div.h-scrollable [class*="col"] {
    display: inline-block;
    float: none;
    white-space: normal;
    vertical-align: top;
  }

    <div class="h-scrollable container-fluid ">
    <div class="row">
        <div class="col-xs-1">
            <label>9:00am</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <label>9:00am</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
    </div>
</div>

can you provide a fiddle? That generally helps to review – Rudresh Ajgaonkar Aug 23 '16 at 18:27 — Rudresh Ajgaonkar, Aug 23 '16 at 18:27

score -1 · Answer 3 · answered Jul 03 '12 at 23:00

-1

You need the overflow-x on the span3's not the span12 i think

answered Jul 03 '12 at 23:00

dezman

18,087
10
53
91

I want to fit more content into span12 then it can fit, therefore the overflow needs to be there. – miki725 Jul 03 '12 at 23:02
sorry, i meant overflow-y on the span3's – dezman Jul 03 '12 at 23:03
why would they need overflow-y? – miki725 Jul 03 '12 at 23:03
7

i don't know what im talking about, sorry – dezman Jul 03 '12 at 23:07

TW Bootstrap: How to overflow columns

3 Answers3

Linked