how do i lock a row in bootstrap 4? - html

Question

I just created a slider that holds four images, the issue is, as soon as the pixel size dips below < 768px, the images begin to lose quality and then stack. Is there any possible way I can lock the images on one row so that they don't move after it goes below 768px?
Thanks in advance.
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- slider 1 -->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
</div>
</div>
<!-- slider 2 -->
<div class="carousel-item">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
css:
.carousel-item span img {
height:200px !important;
}

Answer 1

For Bootstrap 4, you have a new col- tag
So you need to use col-3 in place of specifying col-xs-3 for your divs
(Note that specifying col- automatically sets sm, xs, lg to the same widths unless you specify another class for sm/xs/lg)
jsfiddle: https://jsfiddle.net/as6md81b/16/
Refer https://getbootstrap.com/docs/4.0/layout/grid/