Bootstrap horizontal scroll showing vertical

Question

I have this div container that I want to show a horizontal scroll when there are more than four items (items are pictures with titles).

What I want to achieve:

The problem is that when I put the code bellow I get a vertical scroll and the last item (next one after four) goes into the new row.

Current result:

This is the HTML:

<div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 wrapper">
    <div class="row scroll">
            <div class="col-lg-3 col-md-3 col-sm-12 image-holder">
                <div class="image-crop">
                    <img src="../../../../assets/fortress.jpg" class="img-fluid img-file"
                            alt="Responsive image of item">
                    <div class="shadow"></div>
                </div>

                <span class="image-text">Fortress</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 image-holder"> 
                ... SAME AS ABOVE x4...
            </div>
    </div>
</div>

This is the CSS:

.image-holder {
    position: relative; 
    width: 100%; /* for IE 6 */
}

.image-text {
    position: absolute;
    top: 78%; 
    left: 33%;
    text-align: center;
    color: white;
    font-size: 1.8rem;
}

.image-crop { 
    position: relative;
    margin: 10px;
    float: left;
    -webkit-box-shadow: inset 0 -45px 45px -11px #000000;
    -moz-box-shadow: inset 0 -45px 45px -11px #000000;
    box-shadow: inset 0 -45px 45px -11px #000000;
}

.img-file {
    display: block;
    position: relative;
    z-index: -1;

    height: 270px;
    width: 300px;
    object-fit: cover;
}

/* horizontal scroll */
.wrapper {
    position: relative;
    width: 600px;
}

.scroll {
    overflow-x: scroll;
    overflow-y: scroll;
    height: 250px;
    white-space: normal;
}

The end goal is to get as the result in the first picture. Later I will change the horizontal scroll to vertical when the screen is mobile view.

Here is the StackBlitz without Bootstrap:

https://stackblitz.com/edit/angular-xxuvdx?file=src%2Fapp%2Fapp.component.html

Answer 1

Use the Bootstrap 4 flex-nowrap class..

<div class="row scroll flex-nowrap">
...
</div>

https://www.codeply.com/p/mzQRwa2jip