ブートストラップ4グリッドの例
以下に、Bootstrap4グリッドレイアウトの例をいくつか集めました。
3つの等しい列
指定された数の要素でクラスを使用する.colと、Bootstrapは要素の数を認識します（そして同じ幅の列を作成します）。以下の例では、3つのcol要素を使用しており、それぞれの幅は33.33％です。
col
col
col
例
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div>
数値を使用した3つの等しい列
数値を使用して列幅を制御することもできます。合計が12以下になることを確認してください（使用可能な12列すべてを使用する必要はありません）。
col-4
col-4
col-4
例
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div>
3つの等しくない列
等しくない列を作成するには、数値を使用する必要があります。次の例では、25％/ 50％/ 25％の分割を作成します。
col-3
col-6
col-3
例
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
1列幅の設定
ただし、1つの列の幅を設定するだけで十分であり、兄弟の列のサイズが自動的に変更されます。次の例では、25％/ 50％/ 25％の分割を作成します。
col
col-6
col
例
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
より等しい列
2の1/2
2 of 2
1/4
2/4
3/4
4/4
1/6
2/6
3/6
4/6
5/6
6/6
例
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
行列
.row-cols-*また、クラスを使用して、（列の数に関係なく）隣り合って表示する列の数を制御することもできます。
2の1/2
2 of 2
1/4
2/4
3/4
4/4
1/6
2/6
3/6
4/6
5/6
6/6
例
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
より多くの等しくない列
2の1/2
2 of 2
1/4
2/4
3/4
4/4
1/4
2/4
3/4
4/4
例
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
等しい高さ
列の1つが他の列よりも高い場合（テキストまたはCSSの高さのため）、残りは次のようになります。
多くの痛みは非常に重要であり、食べ物と感覚に違いはありません。そして、私がその週末に得ることができる痛み。悪いイリウレはそれを拾いません、そしてズリルフラットまたはそのようなものはサッカーを見た私たちの一人を助成しました。私たちの痛みは私に読まれるべきではありません、それは彼を粘液プラトンにするべきです。
col
col
例
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
ネストされた列
col-8
col-6
col-6
col-4
次の例は、1つの列の中に別の2つの列がある、2列のレイアウトを作成する方法を示しています。
例
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
レスポンシブクラス
Bootstrap4グリッドシステムには5つのクラスがあります。
.col-（超小型デバイス-画面幅が576px未満）.col-sm-（小型デバイス-576px以上の画面幅）.col-md-（中型デバイス-画面幅が768px以上）.col-lg-（大型デバイス-992px以上の画面幅）.col-xl-（xlargeデバイス-画面幅が1200px以上）
上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。
ヒント：sm各クラスはスケールアップするため、とに同じ幅を設定する場合は
md、を指定するだけで済みますsm。
水平に積み上げ
col-sm-9
col-sm-3
col-sm
col-sm
col-sm
次の例は、大きなデバイス（sm、md、lg、およびxl）で水平になる前に、非常に小さなデバイスでスタックされた列レイアウトを作成する方法を示しています。
例
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div
class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
ミックスアンドマッチ
col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8
例
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
側溝なし
.no-guttersクラスをコンテナに追加して.row、ガター（余分なスペース）を削除します。
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。
ほとんどの場合、私たちの誰もが、そこからの目的を利用することを除いて、あらゆる種類の雇用の行使に来るでしょう。
ほとんどの場合、私たちの誰もが、そこからの目的を利用することを除いて、あらゆる種類の雇用の行使に来るでしょう。
しかし、生まれたすべての誤りが痛みを非難し、賞賛する喜びであることが理解できるように、私はすべての問題を開き、真実の発明者によって、そしてそれが建築家であったように言われたことそのものを説明します祝福された人生。
例
<div class="row no-gutters">