グリッドシステム

基本構造

.container

.containerはカラムグリッドを形成する親要素、.colは各々のカラムとなります。.containerの直下には.colのみを置くようにしてください。(ただし後述の.rowは例外)

※ 以下のコードサンプルでは<div class="container">を省略しています。

.col

.colはinline-block要素、左右にpadding(Gutter)を持っています。これらの設定をオーバーライドしてしまうとレイアウトが正しく表示されないため、各パーツは.colの中にマークアップします。 クラスに加え、コンテナ全体をを12分割した何カラム分かを.col-*で指定することでカラム幅を表現します。.col-12は省略可能です。

.row

.colはinline-blockのため、横に並ぶカラム同士が12を超えると改行されます。明示的にカラムをグループ化して上下に分断する必要がある場合は、colを.rowで囲むことで改行がされます。

レスポンシブ

基本仕様

lg(PC)、md(Table)サイズは.col-*の数字に従いますが、sm(スマホ)では強制的に１カラムになります。

カスタマイズ

.col-md-*でmd表示の時の幅、.col-sm-*でsm表示の時の幅を個別に指定することができます。

レイアウト

オフセット

左側のアキ(オフセット)を作るためには、.colに対し何カラム分のアキを作るのかを指定する.col-offset-*クラスを使用します。

オフセットも.col-*の設定と同様に、lgとmdは共通ですが、smではオフセットなしにリセットされる仕様になっています。これをオーバーライドするためには、.col-md-offset-*.col-sm-offset-*を使用します。

※ sm表示でもオフセットを使う場合、sm表示での.colが横100%(12カラム)にリセットされることに留意してください。上記例では、幅が12以内におさまるよう.col-sm-10を指定しています。

アラインメント

.containerまたは.rowの階層で.text-left.text-center.text-rightを使用することで、カラムの整列が可能です。デフォルトで左寄せのため、オーバーライド目的以外では.text-leftは必要ありません。

バーティカルリズム

.container.row.colはいずれもデフォルトでは上下方向のmarginやpaddingを持っていません。
上下方向のアキを表現するためには、.colに内包させる要素に対し、文書構造を表現するためのclass.chapter.subchapterを使用します。(.chapter、.subchaperの使い方については 文書構造 のページを参照ください。)

.colそのものに対して.chapterを付与することも可能ですが、いずれの場合も.colがdisplay-blockのため、上下に並ぶcol同士や、colの直下の子とのmarginの相殺が起こらず、期待するアキの２倍になってしまうことに注意ください。

内包する子要素に.subchapterクラスを持たせる場合

.colそのものに.subchapterクラスを持たせる場合

グリッドシステムのネスト

.colの直下に.colをネストすると、カラム各々が持つ左右のpadding(gutter)が重複し、期待するレイアウトになりません。

余白を一定に保ったままグリッドをネストするには、.colの中に.containerをネストします(.containerと.colの兼務はできません)。
これによりさらに複雑なレイアウトを表現することができますが、コードも煩雑になるため必要最低限の使用としてください。

Lorem ipsum dolor sit amet, probo molestiae ut quo, odio vide ipsum per id. Quo eius ignota id, an usu dolorem ancillae, ius autem ponderum ut. In doctus fuisset persecuti eam, assueverit sadipscing pro ut. In malis moderatius duo.

Probo senserit molestiae ut quo, odio vide ipsum per id. Quo eius ignota id, an usu dolorem ancillae, ius autem ponderum ut. In doctus fuisset persecuti eam, assueverit sadipscing pro ut. In malis moderatius duo.

Lorem molestiae ut quo, odio vide ipsum per id. Quo eius ignota id, an usu dolorem ancillae, ius autem ponderum ut. In doctus fuisset persecuti eam, assueverit sadipscing pro ut. In malis moderatius duo.

Odio vide ipsum per id. Quo eius ignota id, an usu dolorem ancillae, quo eius ignota id, an usu ius autem ponderum ut. In doctus fuisset persecuti eam, assueverit sadipscing pro ut. In malis moderatius duo.

ユーティリティ

row-no-gutter

内包するcol内の余白(gutter)を無しにする場合にこのユーティリティクラスをrow階層に付与します。

row-wide-gutter

内包するcol内の余白(gutter)を2倍にする場合にこのユーティリティクラスをrow階層に付与します。