systemBootstrap3には、とても柔軟なグリッドが用意されている。モバイル、タブレット、デスクトップ、幅広デスクトップの4つの表示領域に対応するレスポンシブ・グリッド・システムだ。使い方class属性にrowを指定したdiv要素を用意する。このdiv要素は、class属性にcontainerかcontainer-fluidを指定した要素内に配置する。1のdiv要素内に、class属性にcol-*-*を指定したdiv要素を配置する。col-*-*における1つ目の*には、表示幅を意味するxs、sm、md、lgの何れかを指定する。col-*-*における2つ目の*には、カラム数を指定する。一行における最大カラム数は12。可能サンプルカラム数比較サンプル常に水平グリッド表示するcol-xs-を使ったカラム数比較サンプル。モバイル&デスクトップ用グリッド・システムモバイル向けのcol-xs-*と、デスクトップ向けのcol-md-*を使ったグリッド・システムのサンプル。モバイル、タブレット、デスクトップ用グリッド・システムモバイル向けのcol-xs-*、タブレット向けのcol-sm-*、デスクトップ向けのcol-md-*を使ったレスポンシブ・グリッド・システムのサンプル。clearfixclearfix使用比較。12カラム以上を1つの行に配置した場合clearfix使用比較。オフセット・カラムカラム数分、右にずらして配置するスタイルのクラス。入れ子(ネスト)カラムを入れ子(ネスト)にして配置することもできる。表示順を変更col-md-push-*とcol-md-pull-*は、カラム群の表示順を変更することができる。Bootstrap3日本語リファレンス@サイバー・ラボ。