I encountered a problem with my card-deck layout that I need help solving. Despite wanting to maintain the same adaptive width for the cards, when there are 5 cards in a row, the last two cards end up taking up the full width of the container.
Here's what it should look like (iPad example)
https://i.sstatic.net/BBrKH.png#
This is what it currently looks like (iPad example)
https://i.sstatic.net/SSbt9.png
You can also see the issue on widescreen displays here: https://i.sstatic.net/LOEF6.png
An example of the code with 5 cards
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
(repeated card structures)
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
(more repeated card structures with wrapping divs)
</div>
</div>I came across this thread https://github.com/twbs/bootstrap/issues/19650 and attempted using:
.card {
width: initial;
}But unfortunately, it did not fix the issue.