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;
}
}