Bootstrap のグリッドシステムは、ページ全体で 12 カラムまで使用できます。
12 カラム全てを別々に使用したくなければ、カラムをグループにして幅広いカラムを作成することができます：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap グリッドシステムはレスポンシブで、画面サイズに応じて自動的に再配置されます： 大画面では、コンテンツを 3 カラム構成にした方が見やすい場合でも、小さな画面では、コンテンツの項目を互いの上に積み上げ た方が見やすくなります。
チップ: グリッドカラムは、行ごとの合計が 12 でなければならないことを忘れないでください。 それ以上になると、そのカラムはどんなビューポートでもスタックされます。
Bootstrap のグリッドシステムには 4 つのクラスがあります：
ダイナミックでフレキシブルなレイアウトを作成するため、上記クラスを組み合わせることができます。
チップ: 各クラスは、小さい方に調整されるので、xs と sm に同じ幅を設定する場合は、 xs を指定するだけで構いません。
Bootstrap グリッドシステムのルールの幾つかを以下に示します：
.container（固定幅）または
.container-fluid（全体幅）内に 配置しなければなりません。.row や .col-sm-4 のような定義済クラスは、
グリッドレイアウトを素早く作るのに利用できます.rows へのマイナスのマージンにより、行内の最初と最後の列にオフセットされます.col-sm-4 を使用します>下に、Bootstrapグリッドの基本的構造を示します：
<div class="container">
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div>
</div>
レイアウトを作成するには、先ず container を作成します（<div class="container">）。
次に、行を作成します（<div class="row">）。
更に、必要な数だけのカラムを（適切な .col-*-* クラスを持つタグで）追加します。
各行ごとに、.col-*-* の数値の合計が常に 12 でなければならないことに注意してください。
下の表は、Bootstrap グリッドシステムが複数のデバイス間でどのように機能するかをまとめたものです：
| 極小デバイス スマホ (<768px) |
小型デバイス タブレット (>=768px) |
中型デバイス デスクトップ (>=992px) |
大型デバイス デスクトップ (>=1200px) |
|
|---|---|---|---|---|
| グリッドの動作 | 常に横並び | 開始時は折畳み、ブレークポイントを超えると横並び | 開始時は折畳み、ブレークポイントを超えると横並び | 開始時は折畳み、ブレークポイントを超えると横並び |
| コンテナの幅 | None (自動) | 750px | 970px | 1170px |
| クラスの接頭辞 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| カラム数 | 12 | 12 | 12 | 12 |
| カラムの幅 | Auto | ~62px | ~81px | ~97px |
| ガターの幅 | 30px (カラムの各サイドに 15px) | 30px (カラムの各サイドに 15px) | 30px (カラムの各サイドに 15px) | 30px (カラムの各サイドに 15px) |
| ネスト | Yes | Yes | Yes | Yes |
| オフセット | Yes | Yes | Yes | Yes |
| カラムの順序 | Yes | Yes | Yes | Yes |
次の章では、いろいろなデバイスに対するグリッドシステムの例を示します：