Bootstrap4ではMasonryのような表示を可能にする.card-columns が加わった。
https://getbootstrap.jp/docs/4.2/components/card/
Responsiveに対応しているのだが、Breakpointブレークポイントを変更する方法が掲載されていなかったのでメモ。
Cssで簡単に変更することができる。
CSSでBootstrap4 card-columnsのbreakpointsを変更
@media (min-width: 576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 4;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 5;
}
}
SASSでBootstrap4 card-columnsのbreakpointsを変更
.card-columns {
@include media-breakpoint-only(xl) {
column-count: 5;
}
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(md) {
column-count: 3;
}
@include media-breakpoint-only(sm) {
column-count: 2;
}
}