After building a new website using Bootstrap 4, I encountered an issue with responsiveness. The layout consists of a fluid container with a Grid Row containing 8 columns, each filled with image cards. However, the cards do not display properly on different screen sizes.
Currently, the cards appear as 4 in a row at xl size, but stack vertically at lg and smaller sizes. I have tried adjusting the col classes without success.
If anyone can provide assistance to make the cards responsive, I would like them to display as 4 across at xl, 3 across at lg, and 2 across at md, sm, and xs. Currently, they are only displaying correctly at xl size.
This is my first time seeking help here, and I hope to include some code for reference. Thank you in advance!
Code example:
<div class="container-fluid">
<!--Image Grid-->
<div class="row">
<!--Real people Reel-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">Real People Reel</h5>
<p class="card-text text-open-sans">Your greatest and most credible asset.</p>
<br>
<br>
</div>
</div>
<!--End Real People Reel-->
<!--University Hospital Newark-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">University Hospital Newark</h5>
<p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
<br>
<br>
</div>
</div>
<!--End University Hospital Newark-->