How make Bootstrap 4 card decks same width each row?

Question

I am displaying 4 cards each row using a card deck:

<div class="row">
  <div class="card-deck">
    <!-- 4 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">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
</div>
...

The cards within each deck are the same width, but the decks are not, i.e. the deck of the 2nd row is wider than the deck of the 1st row. How do I get the decks to be of the same width?

I have tried setting .card-decks{width: 100%;}, which works for full rows, but distorts cards of rows that have just 1-2 cards.

Additional CSS: My images are of different sizes, that's why I added the following CSS to make them the same. No other CSS should affect the cards:

.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat:   no-repeat;
background-size:     cover;
}

Also, I want to keep the style responsive, so would like to avoid hardcoding pixel set pixel widths.

Carol Skelly · Accepted Answer · 2018-10-01T15:17:19.790

18

Don't put .card-deck in a .row. Only .col- columns should be placed in rows...

content must be placed within columns and only columns may be immediate children of rows.

You should use...

<div class="row">
 <div class="col-12">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
 </div>
</div>

The 2nd part of the question...

When using card-deck (and card-group), cards will always fill the width of the next visual row. If you have less than 4 cards in each row, the remaining cards will fill the width across. To workaround this, set a max-width for each card..

.card-deck .card {
    max-width: calc(25% - 30px);
}

https://www.codeply.com/go/ygvZvjsELs

Alternatively, You can use the grid columns to wrap the cards. This is explained here: Bootstrap 4 card-deck with number of columns based on viewport

edited Oct 01 '18 at 15:17

answered Mar 04 '18 at 12:20

Carol Skelly

351,302
90
710
624

Ok, this works for full rows, but seems to have the same effect like `width: 100%;`, as in if the deck only has a single card it will be distorted. I guess, my question should then be about how to deal with card decks with less number of cards? (I generate the rows dynamically, the last row will not always have 4 cards) – sandboxj Mar 04 '18 at 12:26
why is it `-30px`? – sandboxj Mar 04 '18 at 13:32
2

Because padding is given in left and right 15 px , 15 px. So – sunil kumar Mar 04 '18 at 13:50

How make Bootstrap 4 card decks same width each row?

1 Answers1

Linked