Bootstrapグリッドの実例

基本的なグリッドレイアウトは、Bootstrapグリッドシステム内での構築に精通している。

以下の実例では、いくつかのテーマを追加するためにBootstrapのデフォルトでは利用できない .the-grid-col クラスを列に追加設定している。

6つのグリッド階層 v5.0.0-alpha1階層追加

Bootstrapグリッドシステムには6つの階層があり、サポートするデバイスの各範囲に1つずつある。各階層は最小ビューポートサイズから始まり、書き換えない限り自動的にそれより大きいデバイスにも適用される。

極小
.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
超特大 v5.0.0-alpha1追加
.col-xxl-4
.col-xxl-4
.col-xxl-4

3つの等幅列の代替

.row-cols-* クラスを使用することにより、同じ幅の列を持つグリッドが簡単に作成可能。

.row-cols-md-3 の子要素の .col
.row-cols-md-3 の子要素の .col
.row-cols-md-3 の子要素の .col

3つの等幅列

デスクトップとワイド・デスクトップに拡大したときには、3つの等幅列を表示する。携帯端末、タブレットなどでは、列が自動的に積み重なる。

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

3つの不等な列

デスクトップとワイド・デスクトップに拡大したときには、さまざまな幅の3つの列を表示する。グリッド列は、1つの水平ブロックに対して12個まで追加する必要がある。それ以上の場合、列はビューポートに関係なく積み重ねを開始する。

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

2つの列

デスクトップとワイド・デスクトップに拡大したときには、2列で表示。

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

全幅、単一の列

全幅の要素にはグリッドクラスは不要。


入れ子になった2つの列を持つ2つの列

文章ごとに入れ子にするのは簡単。既存の列内に列の行を配置するだけ。これにより、デスクトップとワイド・デスクトップに拡大したときには、2つの列が表示され、大きい列の中に別の2つの等幅列が表示。

モバイルデバイスのサイズ、タブレット以下では、これらの列とその入れ子にした列は積み重なる。

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

混在:モバイルとデスクトップ

Bootstrap v4グリッドシステムには、xs(極小:このクラスは不使用)、sm(小)、md(中)、lg(大)、xl(特大)の5つの階層がある。これらのクラスのほぼすべての組み合わせを使用して、よりダイナミックで柔軟なレイアウトが作成可能。

クラスの各層はスケールアップされる。つまり、md, lg, xlで同じ幅を設定する場合は、mdを指定するだけでよい。

.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

ガター(列の間隔)v5.0.0-alpha1追加

.gx-* クラスを使用して、水平方向のガターを調整。

.gx-4 ガター付き .col
.gx-4 ガター付き .col
.gx-4 ガター付き .col
.gx-4 ガター付き .col
.gx-4 ガター付き .col
.gx-4 ガター付き .col

.gy-* クラスを使用して、垂直方向のガターを調整。

.gy-4 ガター付き .col
.gy-4 ガター付き .col
.gy-4 ガター付き .col
.gy-4 ガター付き .col
.gy-4 ガター付き .col
.gy-4 ガター付き .col

.g-* クラスを使用して、両方向のガターを調整。

.g-3 ガター付き .col
.g-3 ガター付き .col
.g-3 ガター付き .col
.g-3 ガター付き .col
.g-3 ガター付き .col
.g-3 ガター付き .col

コンテナ v5.0.0-alpha1一部追加

Bootstrap v4.4で追加されたクラスでは、特定のブレークポイントまで100%幅のコンテナが使用可能。

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl v5.0.0-alpha1追加
.container-fluid

閉じる