私たちは基本のいくつかの例を収集している以下のBootstrapグリッドレイアウトを。
3つの等しい列
次の例では、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> »それを自分で試してみてください 三不等列
次の例では、3つの様々な幅の列タブレットで開始し、大きなデスクトップへのスケーリングを取得する方法を示しています。
例
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> »それを自分で試してみてください 等しくない2つの列
次の例では、2つの様々な幅の列はタブレットで始まり、大きなデスクトップへのスケーリングを取得する方法を示しています。
例
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> »それを自分で試してみてください ネストされた2つの列を持つ2つの列
次の例は、2つの列が（携帯電話で、これらの列とそのネストされた列がスタックします）大きなカラム内の別の2列（同じ幅）で、タブレットから開始し、大きなデスクトップへのスケーリングを取得する方法を示しています。
例
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> »それを自分で試してみてください ミックス：モバイルとデスクトップ
Bootstrap ：グリッドシステムは、4つのクラスがありxs （電話）、 sm （タブレット）、 md （デスクトップ）、およびlg （大きい方のデスクトップを）。 クラスは、より動的で柔軟なレイアウトを作成するために組み合わせることができます。
ヒント：各クラスは、スケールアップするので、あなたが同じ幅を設定したい場合はxsとsm 、あなただけ指定する必要がxs 。
例
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> »それを自分で試してみてください ヒント：グリッド列は、行のために12まで追加する必要があることを覚えておいてください。 それ以上に、列はどんなににスタックしますviewport 。
ミックス：モバイル、タブレットとデスクトップ
例
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> »それを自分で試してみてください クリアフロート
（とクリアフロート.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>
<!-- Add clearfix for only the required
viewport -->
<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> »それを自分で試してみてください オフセット列
使用して右に列を移動.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> »それを自分で試してみてください プッシュとプル - 列の変更注文
グリッドの列の順序を変更.col-md-push-*と.col-md-pull-*クラスは：
例
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> »それを自分で試してみてください