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 グリッドシステムは、レスポンシブで、画面サイズに応じて自動的に再配置されます。
Bootstrap grid システムには次の4つのクラスがあります：
これらのクラスは、ダイナミックでフレキシブルなレイアウトを作成するため、組み合せて使用することができます。
下に、Bootstrapグリッドの基本的構造を示します：
<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 class="row">）。
次に、必要な数だけのカラムを（条件に合った .col-*-* クラスを持つタグで）追加します。
各行ごとに、.col-*-* の数値の合計が常に 12 でなければならないことに注意してください。
下に、基本的な Bootstrap グリッドレイアウトのいくつかの例を集めてみました。
次の例は、タブレットにおける幅の等しい 3 カラムを取得する方法を示しています。大型デスクトップでは拡大されますが、 スマホでは、自動的にカラムは縦に積み重ねられ（スタックされ）ます：
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div>
Try it Yourself »
次の例は、タブレットにおける幅の異なる 2 つのカラムを取得する方法を示しています。 大型デスクトップでは拡大されます：
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div>
Try it Yourself »
チップ: Bootstrap グリッドに関しては、このチュートリアルの後段でより詳しく学習します。