Bootstrap 4 card-deck with number of columns based on viewport
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;
}
}