🐶
blog.terrier.dev

posted: 2018/04/04

bootstrap4でbreakpointを減らす


Bootstrap4は標準で4つのbreakpointが存在している (xs, sm, md, lg, xl)
ただこんなに多くbreakpoint管理したくなくて、だいたい2つぐらいで十分だったりする。
grid-tiers の項目を見るとこの値をカスタマイズする手法が書いてあるんのでこれを利用してbreakpointを統合してしまうと潰すことが出来そう
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 576px,
  lg: 992px,
  xl: 992px
);

$container-max-widths: (
  sm: 540px,
  md: 540px,
  lg: 960px,
  xl: 960px
);

@import "bootstrap";

Edit on Github
@terrierscript