以下には、基本的な Bootstrap グリッドレイアウトのいくつかの例を集めてみました。

3 つの等しいカラム

次の例は、タブレットから始まり大型なデスクトップへ拡大できる、3つの等しい幅のカラムを取得する方法を示しています。スマホでは、カラムは自動的にスタックされます：

例

Try it Yourself »

3 つの異なるカラム

次の例は、タブレットから始まり大型なデスクトップへ拡大できる、3つの異なる幅のカラムを取得する方法を示しています：

例

Try it Yourself »

2 つの異なるカラム

次の例は、タブレットから始まり大型なデスクトップへ拡大できる、2つの異なる幅のカラムを取得する方法を示しています：

例

Try it Yourself »

次の例は、タブレットから始まり大型なデスクトップへ拡大できる、2つの異なる幅のカラムを取得する方法を示しています：

例

Try it Yourself »

2つのネストしたカラムを持つ2つのカラム

次の例は、タブレットから始まり大型なデスクトップへ拡大できる、大きいカラム内には別な2つのカラム（等幅）を持つ2つのカラムを取得する方法を示しています（スマホでは、これらのカラムとそのネストしたカラムはスタックされます）：

例

Try it Yourself »

ミックス：モバイルとデスクトップ

Bootstrap グリッドシステムには4つのクラスがあります：xs (携帯電話)、sm (タブレット)、 md (デスクトップ) および lg (大型デスクトップ)。これらのクラスは、よりダイナミックで柔軟なレイアウトを作成するために組み合わせることができます。

チップ: 各クラスは、上のスケールに合わせられるので、xs と sm に同じ幅をしたい場合は、 xs を指定するだけで他は指定する必要がありません。

例

Try it Yourself »

チップ: グリッドカラムは、行に対する合計が 12 でなければならないことを覚えておいてください。それ以上のものは、例えどのようなビューポートでもスタックされます。

ミックス：モバイル、タブレットとデスクトップ

例

Try it Yourself »

Float のクリア

指定のブレークポイントでのフロートのクリア (.clearfix クラスによる) は、不規則なコンテンツの奇妙な折り返しを防ぎます：

例

<div class="row">
<div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>

<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>

Try it Yourself »

カラムのオフセット（空白のカラム）

.col-md-offset-* クラスを使用することで、カラムを右に移動します。これらのクラスは、* カラムでカラムの左マージンを大きくします：

例

<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Try it Yourself »

Push と Pull - カラムの順番を変更

グリッドカラムの順番を、.col-md-push-* と .col-md-pull-* クラスで変更します：

例

Try it Yourself »

Bootstrap グリッドの例

3 つの等しいカラム

例

3 つの異なるカラム

例

2 つの異なるカラム

例

例

2つのネストしたカラムを持つ2つのカラム

例

ミックス：モバイルとデスクトップ

例

ミックス：モバイル、タブレットとデスクトップ

例

Float のクリア

例

カラムのオフセット（空白のカラム）

例

Push と Pull - カラムの順番を変更

例