Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

Bootstrap3のbreakpointとcontainer幅とgrid内余白を変更する

はじめに

breakpointとcontainer幅について復習します。

以下のURLの日本語リファレンスの表を参考にさせて頂きました。

グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

windowサイズが以下それぞれの数値のときに、container幅もそれに対応した数値になります。

Window幅 container幅
~767px None (auto)
768px~991px 750px
992px~1199px 970px
1200px~ 1170px

上記した数値はそれぞれ変数があるので、そのペアを変更することになります。

Bootstrapのsass版をダウンロードする

Bootstrap · The world's most popular mobile-first and responsive front-end framework.」で bootstrap-sass-3.3.7.tar.gz をダウンロードしました。

どこを編集するのか

圧縮されたファイルを展開すると、中に「assets/stylesheets/bootstrap/_variables.scss」があるので、その中を編集します。

breakpoint

breakpoint設定の変数は以下の4つです。

  • $screen-xs: 480px !default;
  • $screen-sm: 768px !default;
  • $screen-md: 992px !default;
  • $screen-lg: 1200px !default;

$screen-xsはcontainerの幅変更には関与していませんが、他のコンポーネントで使用されています。

container幅

container幅設定の変数は以下の4つです。

  • $container-tablet: (720px + $grid-gutter-width) !default;
  • $container-desktop: (940px + $grid-gutter-width) !default;
  • $container-large-desktop: (1140px + $grid-gutter-width) !default;

grid内余白

以下の変数が該当箇所なのですが、影響を与えるコンポーネントは少なくないので、0など極端な数値に変更したい場合はコンパイルした後で個別に変更した方が良いかもしれません。

  • $grid-gutter-width: 30px !default;

編集する

例えばcontainerの最大幅が1170pxだと狭いと感じる場合は、$container-large-desktop と $screen-lg を変更すると良いでしょう。

コンパイルする

普段はgulpやWebpackを使っているのでわからなくなりがちなのですが、「assets/stylesheets/_bootstrap.scss」を以下のコマンドでコンパイルします。

sass _bootstrap.scss:bootstrap.css