Device resolution and breakpoints
XS
モバイル
S
タブレット
M
タブレット & PC Laptop

PC Laptop
XL
Display, PC, Laptop
ブレイクポイント < 切替なし ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
container幅 自動 570px 756px 976px 1168px
Apple devices reference
Non-Apple devices reference
カラム余白 30px(左右に15px)
クラス名 .col-xs .col-sm- .col-md- .col-lg- .col-xl-

* Devices images reference provided by Facebook Design

グリッドのレイアウト方法

  • '.container'は固定幅 '.container-fluid'は流動幅で外枠を設定
  • '.row'で行を設定
  • .col-[prefix]-[数字]でカラムを設定
    ☓☓にはあらかじめ定義されている「xl・lg・md・sm・xs」のどれかを指定しなくてはなりません。

.col-xl- Display, PC, Laptopサイズ

.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-2
.col-xl-3
.col-xl-6
col-xl-3
col-xl-3
col-xl-3
col-xl-3
col-xl-4
col-xl-4
col-xl-4
col-xl-6
col-xl-6
col-xl-6
col-xl-3
col-xl-3
col-xl-3
col-xl-3
col-xl-6
col-xl-3
col-xl-3
col-xl-3
col-xl-3

.contaner 固定幅

.col-md- タブレット、ラップトップサイズ

.col-md-1
.col-md-6
.col-md-6
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-8
.col-md-5
.col-md-7
.col-md-6
.col-md-6
.col-md-7
.col-md-5
.col-md-8
.col-md-4
.col-md-9
.col-md-3
.col-md-10
.col-md-2

.col-xs- モバイルサイズ

.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-2
.col-xs-3
.col-xs-6
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-4
col-xs-4
col-xs-4
col-xs-6
col-xs-6

画面サイズごとにカラム数が変化する設定

.col-sm-2 .col-md-4
.col-sm-8 .col-md-4
.col-sm-2 .col-md-4

.col-sm- タブレットサイズ

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-6
col-sm-3
col-sm-3
col-sm-3
col-sm-3
col-sm-4
col-sm-4
col-sm-4
col-sm-6
col-sm-6
col-sm-6
col-sm-3
col-sm-3
col-sm-3
col-sm-3
col-sm-6
col-sm-3
col-sm-3
col-sm-3
col-sm-3

.contaner-fluid 流動幅

.col-md-12
.col-md-6
.col-md-6
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-8
.col-md-5
.col-md-7
.col-md-6
.col-md-6
.col-md-7
.col-md-5
.col-md-8
.col-md-4
.col-md-9
.col-md-3
.col-md-10
.col-md-2

カラムを入れ子にする

.col-md-8
.col-md-6
.col-md-6
.col-md-4

カラムのオフセット

.col-sm-4
.col-sm-4 .col-sm-offset-4

オフセットカラムで中央揃えにする設定

col-md-10 col-md-offset-
col-md-8 col-md-offset-2
col-md-6 col-md-offset-3
col-md-4 col-md-offset-4
col-md-2 col-md-offset-5

ウィンドウサイズによって表示が切り替わる設定

タブレットサイズでは4カラム、スマホサイズでは2カラムになります。

.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6

カラムの表示順を設定

普通は先に記述したカラムが左にきますが、.col-[prefix]-push-*と.col-[prefix]-pull-*クラスを使うことで表示される順序を変更することができます。

col-md-push-*は、本来の位置より、*に指定したカラム数分、右に配置する。
col-md-pull-*は、本来の位置より、*に指定しmdカラム数分、左に配置する。

md以上の画面サイズでは、push/pullが適用されて並べ替えられています。 sm以下の画面サイズにすると解除されて 写真が先に表示されます。

サンプル画像

.col-md-4 .col-sm-12 .col-xs-12 .col-md-push-8

.col-md-8 .col-sm-12 .col-xs-12 .col-md-pull-4