Bootstrap 4 Card-deck With Number Of Columns Based On Viewport

Answer :

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

Here's a solution with Sass to configure the number of cards per line depending on breakpoints: https://codepen.io/migli/pen/OQVRMw

It works fine with Bootstrap 4 beta 3

// Bootstrap 4 breakpoints & gutter $grid-breakpoints: (     xs: 0,     sm: 576px,     md: 768px,     lg: 992px,     xl: 1200px ) !default;  $grid-gutter-width: 30px !default;  // number of cards per line for each breakpoint $cards-per-line: (     xs: 1,     sm: 2,     md: 3,     lg: 4,     xl: 5 );  @each $name, $breakpoint in $grid-breakpoints {     @media (min-width: $breakpoint) {         .card-deck .card {             flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});         }     } } 

EDIT (2019/10)

I worked on another solution which uses horizontal lists group + flex utilities instead of card-deck:

https://codepen.io/migli/pen/gOOmYLb

It's an easy solution to organize any kind of elements into responsive grid

<div class="container">     <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">         <li class="list-group-item">Cras justo odio</li>         <li class="list-group-item">Dapibus ac facilisis in</li>         <li class="list-group-item">Morbi leo risus</li>         <li class="list-group-item">Cras justo odio</li>         <li class="list-group-item">Dapibus ac facilisis in</li>         <!--= add as many items as you need  =-->     </ul> </div> 

.list-group-item {     width: 95%;     margin: 1% !important; }  @media (min-width: 576px) {     .list-group-item {         width: 47%;         margin: 5px 1.5% !important;     } }  @media (min-width: 768px) {     .list-group-item {         width: 31.333%;         margin: 5px 1% !important;     } }  @media (min-width: 992px) {     .list-group-item {         width: 23%;         margin: 5px 1% !important;     } }  @media (min-width: 1200px) {     .list-group-item {         width: 19%;         margin: 5px .5% !important;     } } 

I got this to work by adding a min-width to the cards:

<div class="card mb-3" style="min-width: 18rem;">   <p>Card content</p> </div> 

The cards don't go below this width, but still properly fill each row and have equal heights.