GitHubで表示

グリッドシステム

12のカラムシステム、5つのデフォルトのレスポンシブ階層、Sassの変数とミックスイン、数十の定義済みクラスのおかげで、強力なモバイルファーストflexboxグリッドを使用して、あらゆる形とサイズのレイアウトを作成できます。

仕組み

Bootstrapのグリッドシステムは、一連のコンテナ、行、カラムを使用して、コンテンツのレイアウトと整列を行います。flexboxを使用して構築されており、完全にレスポンシブです。以下は例であり、グリッドがどのように機能するかを詳しく説明します。

flexboxが初めてですか? FlexboxガイドのCSSトリックスで、背景、用語、ガイドライン、コードスニペットをお読みください。

3つのカラムの1つ

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上記の例では、定義済みのグリッドクラスを使用して、small、medium、large、extra largeデバイスで3つの等幅カラムを作成します。これらのカラムは、親の.containerでページの中央に配置されます。

仕組みを詳しく説明します。

コンテナは、サイトのコンテンツを中央に配置し、水平方向にパディングするための手段を提供します。すべてのビューポートとデバイスのサイズで応答性の高いピクセル幅の場合は.containerを使用し、width: 100%の場合は.container-fluidを使用します。
行はカラムのラッパーです。各カラムには、その間のスペースを制御するための水平方向のpadding（ガターと呼ばれる）があります。このpaddingは、負のマージンを持つ行で相殺されます。このようにして、カラム内のすべてのコンテンツは左側に視覚的に配置されます。
グリッドレイアウトでは、コンテンツはカラム内に配置する必要があり、行の直接の子であるのはカラムのみです。
flexboxのおかげで、widthを指定していないグリッドカラムが均等な幅のカラムとして自動的にレイアウトされます。例えば、.col-smの４つのインスタンスはそれぞれ、小さなブレークポイント以上から自動的に幅が25%になります。詳しい例に関しては自動レイアウトカラムセクションを参照してください。
カラムクラスは1行あたりで利用可能な12のカラムから何個のカラムを使いたいのかを示しています。つまり、均等な幅のカラムを3つ横並びにしたい場合は.col-4を使用できます。
カラムのwidthはパーセンテージで設定されているため、常に流動的で親要素に対するサイズになります。
カラムは、各カラム同士に余白を作成するための水平paddingを持っていますが、.rowに.no-guttersを指定することで、行のmarginとカラムのpaddingを削除できます。
グリッドをレスポンシブにするために、5つのグリッドブレークポイントがあります。これはそれぞれレスポンシブブレークポイントに対応しています: 全てのブレークポイント（非常に小さい）、小さい、中くらい、大きい、より大きい
グリッドブレークポイントは、最小幅メディアクエリに基づいており、これはその1つのブレークポイントとそれより大きいものに適用されることを意味します（例：.col-sm-4は、小さい、中くらい、大きい、およびより大きいデバイスには適用されますが、最初のxsブレークポイントには適用されません）。
事前に定義されたグリッドクラス（.col-4など）や、より意味的なマークアップのためのSass mixinsを使用できます。

たとえば、flexboxに関する制限事項とバグに注意してください。 HTML要素の一部をflexコンテナとして使用できないバグなどです。

グリッドオプション

Bootstrapはほとんどのサイズの定義にemまたはremを使用していますが、グリッドのブレークポイントとコンテナの幅にはpxが使用されています。これは、ビューポートの幅がピクセル単位で、フォントサイズによって変わらないためです。

使い勝手の良いテーブルを使って、Bootstrapグリッドシステムの側面が複数のデバイスでどのように動作するかをご覧ください。

	非常に小さい <576px	小さい ≥576px	中くらい ≥768px	大きい ≥992px	より大きい ≥1200px
最大コンテナ幅	なし（自動）	540px	720px	960px	1140px
クラス接頭辞	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
カラム数	12
余白の幅	30px（カラムの各側に15px）
ネスト可能	はい
カラムの順序付け	はい

自動レイアウトカラム

ブレークポイント固有のカラムクラスを使用して、.col-sm-6のような明示的な番号付きクラスなしで簡単にカラムのサイズ変更を行います。

等幅

たとえば、ここにはxsからxlまでのすべてのデバイスとビューポートに適用される2つのグリッドレイアウトがあります。各ブレークポイントに必要な数のunit-lessクラスを追加すると、すべてのコラムの幅が同じになります。

1/2

2/2

1/3

2/3

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

複数行の等幅

列が新しい行に折り返す場所に.w-100を挿入することで、複数の行にまたがる幅が等しいカラムを作成します。いくつかのレスポンシブディスプレイユーティリティと.w-100を組み合わせてブレイクをレスポンシブにします。

明示的なflex-basisまたはborderなしでは動作しない、Safari flexboxバグがありました。古いバージョンのブラウザに対する回避策がありますが、ターゲットのブラウザがバグのあるバージョンに該当しない場合は必要ありません。

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

1つのカラムの幅を設定する

flexboxグリッドカラムの自動レイアウトは、1つのカラムの幅を設定して、兄弟カラムを自動的にその周りにリサイズできることも意味します。事前に定義されたグリッドクラス（以下に示すように）、グリッドミックスイン、またはインライン幅を使用できます。中央カラムの幅に関係なく、他のカラムがリサイズされることに注意してください。

1/3

2/3（より幅広）

3/3

1/3

2/3（より幅広）

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可変幅のコンテンツ

col-{breakpoint}-{auto}クラスを使用して、コンテンツの自然な幅に基づいてカラムのサイズを調整します。

1/3

可変幅のコンテンツ

3/3

1/3

可変幅のコンテンツ

3/3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

レスポンシブクラス

Bootstrapのグリッドには、複雑なレスポンシブレレイアウトを構築するための、5つの事前定義クラス階層が含まれます。非常に小さい、小さい、中、大きい、非常に大きいどのデバイスでも、自分の気に入ったように列のサイズをカスタマイズします。

すべてのブレークポイント

一番小さなデバイスから一番大きなデバイスまで同じグリッド用に、.colおよび.col-*クラスを使用します。特定のサイズのカラムが必要な場合は、数値のついたクラスを指定します。それ以外の場合は.colのままにして構いません。

col

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

スタックから水平へ

1つの.col-sm-*クラスを使用して、積み重ねが開始して、小さいブレークポイント（sm）で水平になる基本的なグリッドシステムを作成できます。

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</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>
</div>

ミックスアンドマッチ

カラムをいくつかのグリッド階層に積み重ねたくないですか？必要に応じて、各階層にさまざまなクラスの組み合わせを使用します。すべてがどのように機能するかについては、以下の例をご覧ください。

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ガター

ガターは、ブレークポイントに特有のパディングと負のマージンユーティリティクラスで、レスポンシブに調整できます。特定の行でガターを変更するには、.rowの負のマージンユーティリティと.colのパディングユーティリティをペアリングします。一致するパディングユーティリティを使用して、不要なオーバーフローを回避するために、親の.containerまたは.container-fluidを調整する必要もあります。

大きい（lg）ブレークポイント以上でBootstrapグリッドをカスタマイズする例を次に示します。.px-lg-5で.colパディングを増やし、親.rowの.mx-lg-n5でそれを中和し、次に.px-lg-5で.containerラッパーを調整しました。

カスタムカラムパディング

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行カラム

レスポンシブな.row-cols-*クラスを使用して、コンテンツとレイアウトを最も適切にレンダリングするカラム数をすばやく設定します。通常の.col-*クラスは個々のカラム（例：.col-md-4）に適用されますが、行カラムクラスはショートカットとして親の.rowに設定されます。

これらの行カラムクラスを使用して、基本的なグリッドレイアウトをすばやく作成したり、カードレイアウトを制御したりします。

カラム

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Sassミックスインrow-cols()も使用できます

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

整列

Flexbox整列ユーティリティを使用して、カラムを垂直および水平方向に整列します。Internet Explorer 10-11は、次のようにflex containerに最小高がある場合、flexアイテムの垂直方向の整列をサポートしません。 詳細については、Flexbugs #3を参照してください。

垂直方向の整列

3つのカラムの1つ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

3つのカラムの1つ

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平方向の整列

2つのカラムの1つ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ガターなし

事前定義されたグリッドクラスのカラムのガターは.no-guttersで削除できます。これにより、.rowから負のmarginが削除され、すべての子カラムから水平のpaddingが削除されます。

これらのスタイルを作成するためのソースコードを次に示します。カラムオーバーライドは最初の子供カラムのみにスコープされ、属性セレクタを介してターゲットにされています。これにより、より具体的なセレクタが生成されますが、カラムパディングはspacingユーティリティでさらにカスタマイズできます。

端から端までデザインが必要ですか？親の.containerまたは.container-fluidをドロップします。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

実際には、このように表示されます。他のすべての事前定義されたグリッドクラス（カラム幅、応答階層、並べ替えなど）とともに引き続き使用できることに注意してください。

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

カラムの折り返し

1つの行内に12個を超えるカラムが配置されている場合、追加のカラムの各グループは1つのユニットとして新しい行に折り返されます。

.col-9

.col-4
9 + 4 = 13 > 12なので、この4列幅divは1つの連続したユニットとして新しい行に折り返されます。

.col-6
後続のカラムは新しい行に沿って続きます。

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

カラムのブレイク

Flexboxでカラムを新しい行に分割するには、小さなハックが必要です。カラムを新しい行に折り返したい場所にwidth: 100%の要素を追加します。通常、これは複数の.rowで実現されますが、すべての実装方法でこれを説明できるわけではありません。

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

こうした区切りを私たちのレスポンシブ表示用ユーティリティで特定の区切り地点に適用することもできます。

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

並べ替え

順序クラス

コンテンツのビジュアル順序を制御するには.order-クラスを使用します。これらのクラスはレスポンシブなので、orderを区切り地点別に設定できます（例: .order-1.order-md-2）。全部で5つのグリッド階層にわたって1から12までをサポートしています。

DOMの先頭、順序が適用されていません

DOMの2番目、順序が大きい

DOMの3番目、順序が1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

また、順番にorder: -1とorder: 13（order: $columns + 1）を適用することで要素のorderを変更するレスポンシブな.order-firstと.order-lastの各クラスもあります。また、必要に応じてこれらのクラスは番号付きの.order-*クラスと組み合わせて使用することもできます。

DOMの先頭、最後に順序付け

DOMの2番目、順序なし

DOMの3番目、最初に順序付け

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

カラムのオフセット

グリッドの列には私たちのレスポンシブな.offset-グリッドの各クラスとマージンのユーティリティの2つの方法でオフセットできます。グリッドクラスのサイズは列に一致するように設定されていますが、マージンはオフセットの幅が可変の場合にクイックレイアウトにもっと役立ちます。

オフセットクラス

.offset-md-*クラスを使用して、列を右に移動します。これらのクラスは*列だけ、列の左のマージンを増やします。例えば、.offset-md-4は.col-md-4を4列だけ移動します。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

レスポンシブな区切り地点で列をクリアすることに加えて、オフセットの再設定が必要になる場合があります。Gridの例で、この操作を確認できます。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

マージンユーティリティ

v4ではflexboxに移動したので、.mr-autoのようなマージンのユーティリティを使用して、兄弟の列同士を強制的に離すことができます。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ネスト

デフォルトのグリッドでコンテンツをネストするには、既存の.col-sm-*列内に新しい.rowと.col-sm-*列を設定します。ネストされた行には、合計12以下（利用可能な12列すべてを使用する必要はありません）の列のセットを含める必要があります。

レベル1: .col-sm-9

レベル2: .col-8 .col-sm-6

レベル2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass ミキシン

BootstrapのソースSassファイルを使用する場合、Sassの変数とミックスインを使用して、カスタムで意味のあるレスポンシブなページレイアウトを作成できます。あらかじめ定義されたグリッドクラスは、これらの同じ変数とミックスインを使用して、すぐに使用できる一連のクラスを高速レスポンシブレイアウト用に提供します。

変数

変数とマップは、列の数、ガターの幅、および列のフロートを開始するメディアクエリポイントを決定します。これらを使用して、上記に記載されている事前定義のグリッドクラスを生成し、以下に示すカスタムミックスインも生成します。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

ミキシン

ミックスインは、グリッド変数と組み合わせて、個々のグリッド列のための意味的なCSSを生成するために使用されます。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

使用方法の例

変数を独自のカスタム値に変更するか、既定値を使用してミックスインを使用できます。以下は既定の設定を使用して、間に隙間のある2列レイアウトを作成する例です。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

メインコンテンツ

セカンダリコンテンツ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

グリッドのカスタマイズ

組み込みグリッドSass変数とマップを使用すると、あらかじめ定義されたグリッドクラスを完全にカスタマイズできます。階層の数、メディアクエリディメンション、コンテナの幅を変更してから再コンパイルします。

カラムとガター

グリッドのカラム数は Sass 変数で変更できます。$grid-columns は個々のカラムの幅（パーセント）を生成するために使用され、$grid-gutter-width はカラムのガターの幅を設定します。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

グリッド階層

カラム自体の外側を利用する場合、グリッド階層の数もカスタマイズできます。4 つのグリッド階層だけが必要な場合は、$grid-breakpoints と $container-max-widths を次のように更新してください。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 変数またはマップに変更を加えた場合は、変更を保存して再コンパイルする必要があります。これにより、カラムの幅、オフセット、順序の定義済みグリッドクラスの新しいセットが出力されます。レスポンシブビジビリティユーティリティも更新されて、カスタムブレークポイントが使用されます。グリッドの値は px（rem、em、または % ではありません）で設定してください。