I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.
Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): DEMO
The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: https://jsfiddle.net/6kvw2q5h/
HTML
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
CSS
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
What am I doing wrong? I'm at wits end.
HTML
CSS
NOTE : codepen
I think you need to remove the flexbox functionality of the
.row
so add:So it should look like the following: