列アイテム（Columns） v5.0.0「グリッド」より分離

使い方（How they work）

• 列はグリッドのFlexbox構造上に構築される。Flexboxとは、行レベルで個々の列を変更したり、列のグループを変更したりするためのオプションがある。列の拡大縮小やその他の変更方法を選択する。
• グリッドレイアウトを構築する場合、すべてのコンテンツは列に配置される。Bootstrapのグリッドの階層は、コンテナ、行、列、コンテンツの順である。まれにコンテンツと列の組み合わせがあるが、意図しない結果が生じる可能性があるので注意。
• Bootstrapには、迅速にレスポンシブ性の高いレイアウトを作成するための定義済クラスが組み込まれている。各グリッド層に6つのブレークポイントと12の列があるため、必要なレイアウトを作成するのにすでに構築済の数十のクラスがある。これは、必要に応じてSassで無効にできる。

配置（Alignment）

Flex配置ユーティリティを使用して、列を縦と横に整列させる。

垂直方向の配置（Vertical alignment）

レスポンシブな align-items-* クラスのいずれかを使用して、垂直方向の配置を変更。

1.列を上揃え

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
     3つの列の1列目
     （高め）
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
     （少し高め）
    </div>
  </div>
</div>

2.列を上下中央揃え

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
     3つの列の1列目
     （高め）
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
     （少し高め）
    </div>
  </div>
</div>

3.列を下揃え

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row align-items-end">
    <div class="col">
     3つの列の1列目
     （高め）
    </div>
    <div class="col">
     3つの列の2列目
    </div>
    <div class="col">
     3つの列の3列目
     （少し高め）
    </div>
  </div>
</div>

4.列ごとの垂直方向の配置

またレスポンシブな .align-self-*クラス を使って、各列の配置を個別に変更できる。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      3つの列の1列目（上揃え）
    </div>
    <div class="col align-self-center">
      3つの列の2列目（中央揃え）
    </div>
    <div class="col align-self-end">
      3つの列の3列目（下揃え）
    </div>
  </div>
</div>

水平方向の配置（Horizontal alignment）v5.0.0-alpha1クラス追加

レスポンシブ対応の justify-content-* クラスのいずれかを使用して、水平方向の配置を変更。

見本 見やすいよう色と枠を付けています

設定例

列の行頭揃え<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列の中央揃え<div class="container text-center">
  <div class="row justify-content-center">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列の行末揃え<div class="container text-center">
  <div class="row justify-content-end">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列を等間隔に配置<div class="container text-center">
  <div class="row justify-content-around">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列を両端から均等に配置<div class="container text-center">
  <div class="row justify-content-between">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列の間隔を両端から均等に配置<div class="container text-center">
  <div class="row justify-content-evenly">
    <div class="col-4">
      2つの列の1列目
    </div>
    <div class="col-4">
      2つの列の2列目
    </div>
  </div>
</div>

列の折り返し（Column wrapping）

1つの行に列の数値の合計が12以上で配置されている場合、余分な列の各グループは1つの単位として新しい行に折り返される。

見本 見やすいよう色と枠を付けています

設定例

<div class="container">
  <div class="row">
    <div class="col-9">1列目: .col-9</div>
    <div class="col-4">2列目: .col-4<br> ... </div>
    <div class="col-6">3列目: .col-6<br> ... </div>
  </div>
</div>

列の分割（Column breaks）

Flexboxの新しい行に列を分割するには、小さなハックが必要。列を新しい行で折り返したい場合は、width: 100% の要素を追加する。通常、これは複数の .row で実行されるが、全ての実装方法がこれを考慮するわけではない。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">1列目: .col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">2列目: .col-6 .col-sm-3</div>
    <!-- 次の列を強制的に改行する -->
    <div class="w-100"></div>
    <div class="col-6 col-sm-3">3列目: .col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">4列目: .col-6 .col-sm-3</div>
  </div>
</div>

また、レスポンシブ表示ユーティリティを使用して特定のブレークポイントで分割を適用することもできる。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">1列目: .col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">2列目: .col-6 .col-sm-4</div>

    <!-- 次の列を中サイズ以上で強制的に新しい行に分割 -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">3列目: .col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">4列目: .col-6 .col-sm-4</div>
  </div>
</div>

並べ替え（Reordering）

列の順序変更（Order classes）v5.0.0-alpha1設定変更、クラス追加

.order- クラスを使用して、コンテンツの視覚的順序を制御。これらのクラスはレスポンシブ対応なので、ブレークポイントで order を設定できる（.order-1.order-md-2 など）。5つのグリッド層のすべてで 0 から 5 のサポートがなされている。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row">
    <div class="col order-2">
      DOMでは1番目だが表示順序は2番目
    </div>
    <div class="col order-3">
      DOMでは2番目だが表示順序は最後
    </div>
    <div class="col order-1">
      DOMでは3番目だが表示順序は最初
    </div>
  </div>
</div>

レスポンシブな .order-first と .order-last クラスもあり、order: -1 と order: 6 を適用することで要素の順序を変更。このクラスは、必要に応じて番号付きの .order-* クラスと混在できる。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      DOMでは1番目だが表示順序は最後
    </div>
    <div class="col">
      DOMでは2番目だが表示順序付けはない
    </div>
    <div class="col order-first">
      DOMでは3番目だが表示順序は最初
    </div>
  </div>
</div>

.order-* クラスがさらに必要な場合は、$utilities Sassマップを変更することで新しいクラスを追加できる。詳細はSassマップとループかユーティリティを変更の解説をご参照ください。v5.3.4追加

設定例

custom.scss$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // 新しい `.order-{breakpoint}-6` ユーティリティを追加
            last: 7 // `.order-{breakpoint}-last`ユーティリティで次の番号を使用するように変更
          )
        ),
      ),
    ),
  )
);

定義済クラスの種類 *は0～5の整数かfirst/last

※.order(-{breakpoint})-* の * は、

• first は、その列に order: -1 を設定
• 0 は、その列に order: 0 を設定
• 1 は、その列に order: 1 を設定
• 2 は、その列に order: 2 を設定
• 3 は、その列に order: 3 を設定
• 4 は、その列に order: 4 を設定
• 5 は、その列に order: 5 を設定
• last は、その列に order: 6 を設定

する。

空白列の指定（Offsetting columns）v5.0.0-alpha1クラス追加

グリッドカラムは、レスポンシブの .offset- グリッドクラスと空白ユーティリティの二つの方法でオフセットできる。グリッドクラスのサイズは余白がクイックレイアウトのより有効な変数のオフセットの幅のある列に一致。

オフセットクラス（Offset classes）

.offset-md-* クラスを使用して列を行末に移動する。これらのクラスは、列の行頭余白を * 列だけ増加させる。例えば、.offset-md-4 は4列分 .col-md-4 を移動する。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <!-- 有効/空白/有効 -->
  <div class="row">
    <div class="col-md-4">1列目:...</div>
    <div class="col-md-4 offset-md-4">2列目:...</div>
  </div>

  <!-- 空白/有効/空白/有効 -->
  <div class="row">
    <div class="col-md-3 offset-md-3">1列目:...</div>
    <div class="col-md-3 offset-md-3">2列目:...</div>
  </div>

  <!-- 空白/有効/空白 -->
  <div class="row">
    <div class="col-md-6 offset-md-3">1列目:...</div>
  </div>
</div>

レスポンシブ・ブレークポイントでの列クリアに加えて、空白列をリセットする必要があるかもしれない。グリッドの実例にも記載。

見本 見やすいよう色と枠を付けています

設定例

<div class="container text-center">
  <!-- 極小サイズでは縦積みに表示、小サイズでは列の間に空白あり、中サイズ以上では1:1の表示 -->
  <div class="row">
    <div class="col-sm-5 col-md-6">1列目: .col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目: .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <!-- 極小サイズでは縦積みに表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズ以上では再び1:1の表示 -->
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">1列目: .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">2列目: .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

定義済クラスの種類 *は0～11の整数

※.offset(-{breakpoint})-* の * は、

• 0 は、その列に margin-left: 0（左側に空白なし） を設定
• 1 は、その列に margin-left: 8.33333333%（左側に12分の1（1列分）の空白サイズ） を設定
• 2 は、その列に margin-left: 16.66666667%（左側に6分の1（2列分）の空白サイズ） を設定
• 3 は、その列に margin-left: 25%（左側に4分の1（3列分）の空白サイズ）を設定
• 4 は、その列に margin-left: 33.33333333%（左側に3分の1（4列分）の空白サイズ）を設定
• 5 は、その列に margin-left: 41.66666667%（左側に12分の5（5列分）の空白サイズ）を設定
• 6 は、その列に margin-left: 50%（左側に2分の1（6列分）の空白サイズ）を設定
• 7 は、その列に margin-left: 58.33333333%（左側に12分の7（7列分）の空白サイズ）を設定
• 8 は、その列に margin-left: 66.66666667%（左側に3分の2（8列分）の空白サイズ）を設定を設定
• 9 は、その列に margin-left: 75%（左側に4分の3（9列分）の空白サイズ）を設定を設定
• 10 は、その列に margin-left: 83.33333333%（左側に6分の5（10列分）の空白サイズ）を設定を設定
• 11 は、その列に margin-left: 91.66666667%（左側に12分の11（11列分）の空白サイズ）を設定

する。

マージンクラス（Margin utilities）v5.0.0-beta1クラス名変更

v4のFlexboxへの移行により、.me-auto のようなマージンユーティリティを使用して、兄弟列の間をを互いに空ける。

見本 見やすいよう色と枠を付けています

Bootstrap5.xの設定例 緑背景が変更箇所

有効/空白/有効<div class="container text-center">
  <div class="row">
    <div class="col-md-4">1列目:...</div>
    <div class="col-md-4 ms-auto">2列目:...</div>
  </div>
</div>

空白/有効/空白/有効<div class="container text-center">
  <div class="row">
    <div class="col-md-3 ms-md-auto">1列目:...</div>
    <div class="col-md-3 ms-md-auto">2列目:...</div>
  </div>
</div>

有効列を両端に<div class="container text-center">
  <div class="row">
    <div class="col-auto me-auto">1列目:...</div>
    <div class="col-auto">2列目:...</div>
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

有効/空白/有効<div class="container text-center">
  <div class="row">
    <div class="col-md-4">1列目:...</div>
    <div class="col-md-4 ml-auto">2列目:...</div>
  </div>
</div>

空白/有効/空白/有効<div class="container text-center">
  <div class="row">
    <div class="col-md-3 ml-md-auto">1列目:...</div>
    <div class="col-md-3 ml-md-auto">2列目:...</div>
  </div>
</div>

有効列を両端に<div class="container text-center">
  <div class="row">
    <div class="col-auto mr-auto">1列目:...</div>
    <div class="col-auto">2列目:...</div>
  </div>
</div>

独立した列クラス（Standalone column classes）v5.0.0-alpha1新設、v5.0.0-beta1設定変更

.col-* クラスを .row の外で使用して、要素に特定の幅を与えることもできる。列クラスが行の非直接の子要素として使用される場合はpaddingは省略される。

見本 見やすいよう色と枠を付けています

設定例

<div class="col-3 p-3 mb-2">
  .col-3: 常時25%の幅
</div>
<div class="col-sm-9 p-3">
  .col-sm-9: sm（小）ブレークポイント以上では75%の幅
</div>

クラスをユーティリティと一緒に使用すればレスポンシブなフロート（横の配置）画像が作成できる。テキストが短い場合は、コンテンツを .clearfix で囲んでフロートをクリアする。

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

<div class="clearfix">
  <img src="..." alt="レスポンシブなフロート画像" class="col-md-6 float-md-end mb-3 ms-md-3">
  <p>プレースホルダテキストの段落。...</p>
  <p>...</p>
  <p>...</p>
</div>