Bootstrap グリッドサンプル

Bootstrap グリッドシステムを用いたグリッドの作成になれるための基本的なグリッドレイアウトです。

このサンプルでは.themed-grid-col クラスでカラムにテーマを追加しています。このクラスはデフォルトの Bootstrap で利用できるものではありません。

5段階のグリッド

Bootstrap グリッドシステムには5つの段階があり、それぞれ異なる画面サイズのデバイスをサポートします。各段階は最小のビューポートサイズから始まり、上書きされない限り自動的により大きいデバイスに適用されます。

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

3つの等幅カラム

3列の等幅カラムはデスクトップサイズからより大きいデスクトップサイズに対してスケールします。. モバイルデバイスやタブレットでは、カラムは自動的にスタックされます。

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

もう1種類の3つの等幅カラム

.row-cols-* クラスを使うことで、等幅なカラムを持ったグリッドを簡単に作ることができます

.col child of .row-cols-md-3
.col child of .row-cols-md-3
.col child of .row-cols-md-3

3つの非等幅カラム

様々な幅のデスクトップサイズからより大きいデスクトップサイズに対してスケールします。一つの水平なブロックに付きグリッドカラムは12まで並べることができます。

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

2列のカラム

デスクトップからより大きいデスクトップサイズに対してスケールします。

.col-md-8
.col-md-4

全幅、単一カラム

全幅の要素にはグリッドクラスは必要ありません。

2列のカラムをネストした2列のカラム

ネストはとても簡単で、カラムの中にカラムの列を配置するだけです。このネストされたカラムは、それを含んだカラムと共にデスクトップからより大きいデスクトップサイズに対してスケールします。

モバイルデバイスやタブレット以下のサイズにおいては、ネストされたカラムとそれを含んだカラムはスタックされます。

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

Bootstrap v4 のグリッドシステムは xs（最小）、sm（小）、md（中）、lg（大）、xl（より大）の5段階のクラスがあります。これらのクラスを組み合わせてよりダイナミックでフレキシブルなレイアウトを作成することができます。

各段階のクラスはスケールアップします。すなわち、もし xs と sm で同じ幅に設定しようとした場合、xs を指定するだけで済みます。

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

混合：モバイル、タブレット、デスクトップ

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

ガター

.gx-* クラスを使うことで、水平方向のガターを調整することができます。

.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters

.gy-* クラスで垂直方向のガターを調整できます。

.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters

.g-* クラスで両方のガターを調整できます。

.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters

Containers

Bootstrap v4.4 で追加されたクラスはコンテナの幅を特定のブレークポイントに到達するまで 100% にできます。v5 では新しく xxl ブレークポイントを追加しました。

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid