Skip to main content

Bootstrap グリッドサンプル

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

3つの等幅カラム

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

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

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-12 .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-12 .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