I have a layout where I am displaying four cards in each row using a card deck:
<div class="row">
<div class="card-deck">
<!-- Four of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
<div class="row">
<div class="card-deck">
<!-- Four of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
...
The width of the cards within each deck is consistent, however, the decks themselves are not equal in width. For example, the deck in the second row is wider than the one in the first row. How can I ensure that all decks have the same width?
I attempted to set .card-decks{width: 100%;}, which worked for full rows but caused distortion when there were only 1-2 cards in a row.
Additional CSS: Since my images vary in size, I added the following CSS to make them appear uniform without impacting other styles:
.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
To maintain responsiveness and avoid setting specific pixel widths, I would like a solution that adapts to different screen sizes dynamically.