Bootstrap 4 card-deck with number of columns based on viewport

Question

I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.

The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply here.

This doesn't make sense to me since, I would assume, that you'd want a minimum size for your card to shrink to in order for your content to still look good.

I then tried adding in some viewport classes to break on screen sizes, but as soon as that div gets added, the card-deck doesn't apply anymore, thus not making the cards equal height.

How can I get this accomplished? Is this a missing feature that will be addressed in the full release of Bootstrap 4?

Here's the fiddle: https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">   <div class="card-deck">     <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>           <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>           <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>There are also some interesting new text classes for uppercase and capitalize.</p>           <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>           <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>         </blockquote>       </div>     </div>         <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>           <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>           <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>There are also some interesting new text classes for uppercase and capitalize.</p>           <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>         </blockquote>       </div>     </div>     <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">       <div class="card-block">         <blockquote class="card-blockquote">           <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>           <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>         </blockquote>       </div>     </div>   </div> </div> 

Answer 1

Updated 2018

If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...

Bootstrap 4 responsive card-deck (v 4.1)

---

Original answer for Bootstrap 4 alpha 2:

You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox.

.row > div[class*='col-'] {   display: flex;   flex:1 0 auto; } 

http://codeply.com/go/O0KdSG2YX2 (alpha 2)

The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk

---

Related question: Bootstrap 4 - Responsive cards in card-columns