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
<div class="container testimonial-group">
<div class="row text-center flex-nowrap">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
<div class="col-sm-4">7</div>
<div class="col-sm-4">8</div>
<div class="col-sm-4">9</div>
</div>
</div>
CSS
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-sm-4:nth-child(3n+1) { background: #c69; }
.col-sm-4:nth-child(3n+2) { background: #9c6; }
.col-sm-4:nth-child(3n+3) { background: #69c; }
NOTE : codepen
I think you need to remove the flexbox functionality of the .row
so add:
.live__scroll .row{
display:block;
}
So it should look like the following:
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .row{
display:block;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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>