[Bootstrap 4] containerの横幅を変える

IT記事Bootstrap,scss

Bootstrap 4の設定値を変更してcontainerの横幅を変える方法。

環境は、npmで Bootstrap をインポート＆コンパイルしているとする。（そこの説明は省略する）

Bootstrap を読み込む前にBootstrapで使っている変数を記述する。するとデフォルト値を変更することができる。以下ではcontainerの横幅を画面がxlの時に1720pxにしている。 

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

@import 'node_modules/bootstrap/scss/bootstrap';

変更できるのは、https://github.com/twbs/bootstrap/blob/master/scss/_variables.scssに書いてある変数。

containerの横幅の部分を引用すると以下のようになっている。

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

!defaultというキーワードは、それより前に設定してあったらそっちを使って、設定してなかったらdefaultのついた値の方になるという意味。