My current challenge involves using Bootstrap 4 cards within a modal. Regardless of the number of cards I implement, they all end up in a single row. Ideally, I would like to have a maximum of 3 cards per row. Another issue arises when resizing the window, as the cards become too compact and unreadable.
I attempted to solve this problem by utilizing:
display: inline-block;
However, this approach did not yield the desired outcome.
<div class="portfolio-modal mfp-hide" id="labrador-modal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="card-group">
/* Card content here */
</div>
</div>
</div>
The image below demonstrates how the layout looks with 3 cards:
While this arrangement appears satisfactory, adding an extra card results in overcrowding. The same issue occurs when resizing the page, as shown in the following screenshot: