22

I use the following HTML code:

<div id="list">
    <div class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">n-times</div> 
    </div>
</div>

So, I need to display one row with infinity columns by horizontal with scrolling in the bottom of page.

How can I do this?

So, I tried to set fixed width for list container and have set overflow-x: auto

BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
Halama
  • 265
  • 1
  • 3
  • 7
  • Bootstrap only supports 12 columns, not infinity (that would require an infinitely large stylesheet). You would need to overwrite the "width:25%" that `col-md-3` sets, to something fixed probably. – Rik Lewis Jan 31 '17 at 16:47
  • So, what is solution then? – Halama Jan 31 '17 at 16:58
  • No, the way that bootstrap handles columns is with percentages, so to extrapolate the same method would take lots and lots of classes. But if you don't want to do it the bootstrap way, why use bootstrap? There are other grid systems. – Rik Lewis Jan 31 '17 at 18:26
  • Actually Bootstrap *does* support more than 12 columns units in a single row and wouldn't require more CSS selectors. Again native flexbox in Bootstrap 4 so it is the Bootstrap way. You're confusing 12 grid units with allowed columns per row. – Carol Skelly Jan 31 '17 at 18:30
  • This question is not a dup of [this](http://stackoverflow.com/questions/26679160/bootstrap-3-more-than-12-columns-in-a-row). This question is how to create horizontal scrolling. – Carol Skelly Feb 02 '17 at 19:09

2 Answers2

48

It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox.

Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout..

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
    </div>
</div>

Bootstrap 4 Demo: http://codeply.com/go/GoFQqQAFhN

Also see: Horizontally scrollable list of cards in Bootstrap

For Bootstrap 3, it would be done with some CSS for the flexbox.. .

row > .col-xs-3 {
    display:flex;
    flex: 0 0 25%;
    max-width: 25%
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
}
.flex-row {
    display:flex;
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
}

Bootstrap 3 Demo: http://codeply.com/go/P13J3LuBIM

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
3

One other way :

CSS:

#list .row {white-space:nowrap;}
#list .row > div {display:inline-block;float:none;}

Js for horizontal scrolling:

window.addEventListener('mousewheel', function(e){
    e.preventDefault();
    var step = -100;  
    if (e.wheelDelta < 0) {
      step *= -1;
    }
    var newPos = window.pageXOffset + step;
    $('body').scrollLeft(newPos);    
})

Bootply : https://www.bootply.com/pbenard/usmX12rxgP

BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105