Bootstrap 4 horizontal scroller div - css

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

horizontal scoll bar using bootstrap 4
In table
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>bharti</td>
<td>parmar</td>
<td>422</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
In navigation bar
<div class="scrollmenu">
Home
News
Contact
About
Support
Home
News
Contact
About
Support
Home
News
Contact
About
Support
</div>
css code
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}