I recently put together a slider featuring four images, but I've encountered an issue. When the pixel size drops below 768px, the image quality diminishes and they start stacking on top of each other. Is there a way to keep the images in a single row even when the screen size is less than 768px?
Thank you for any help or advice!
<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;
}