EZ-SPARROW > TECH NOTES > Bootstrap4 card-columnsのbreakpointsを変更し表示card数を変更する方法

Bootstrap4 card-columnsのbreakpointsを変更し表示card数を変更する方法

August 04, 2020

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

RELATED POSTS