Bootstrapでブレイクポイントを変更する

CSS on 11 May , 2015

Twitterが作ったcssフレームワークおBootstrapは便利ですね。
ブレイクポイントが768px未満、768px~991px、992px~1199px、1200pxと分かれているんですが、最少のブレイクポイントが768pxとなっています。

PCでブラウザをぐりぐり動かして768px以下になると、Bootstrapではスマホサイズ(モバイルサイズ)となってしまいます。
スマホサイズは480px位からブレイクして欲しいところです。
デフォルトのContainer sizesは768pxから1120pxになっています。1120pxが大きすぎるので最大Container sizesを980pxにします。

Bootstrapにはcssのカスタム機能があるので、ブレイクポイントとContainer sizesをカスタマイズしてみます。

カスタマイズ内容は
スマホサイズ:480px以下、col-xsでブレイク
タブレットサイズ:770以下、col-smでブレイク、containerサイズは481px以上770以下で768px
PCサイズは:771以上、col-mdでブレイク、containerサイズは980px
PCサイズは:981以上、col-lgでブレイク、containerサイズは980px

カスタマイズするためgetbootstrap.com/customizeにアクセス。

変更は以下のようになります。

SnapCrab_NoName_2015-5-11_21-39-58_No-00

赤枠の箇所を変更しました。
これで使い勝手の良い感じになりました。