空白ユーティリティ（Spacing） v5.0.0一部クラス名変更

マージンとパディング（Margin and padding）

可変性に優れた margin や padding 値を、要素かその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、0.25rem から 3rem までのデフォルトのSassマップから構築。

記法について（Notation）v5.0.0-beta1一部設定変更

xs から xl までの全てのブレークポイントに適用される空白ユーティリティには、ブレークポイントの省略形がない。これは、これらのクラスが min-width: 0 以上から適用され、メディアクエリにバインドされていないため。ただし、残りのブレークポイントにはブレークポイントの省略形が含まれる。

クラス名は、xs（すべてのビューポイント）の場合は、.{property}{sides}-{size} の形式で指定し、sm, md, lg, xl, xxl の場合は、{property}{sides}-{breakpoint}-{size} の形式で指定。

property（空白の設定）：

• m - margin を設定するクラス
• p - padding を設定するクラス

sides（空白の方向）：

• t（上：top） - margin-top や padding-top を設定するクラス
• b（下：bottom） - margin-bottom や padding-bottom を設定するクラス
• s（行頭：start）v5.0.0-beta1設定変更 - LTR（左書き）で margin-left や padding-left を設定し、RTL（右書き）で margin-right や padding-right を設定するクラス
• e（行末：end）v5.0.0-beta1設定変更 - LTR（左書き）で margin-right や padding-right を設定し、RTL（右書き）で margin-left や padding-left を設定するクラス
• x（左右） - *-left と *-right の両方を設定するクラス
• y（上下） - *-top と *-bottom の両方を設定するクラス
• 「なし」（上下左右） - 要素の4方向すべてに margin や padding を設定するクラス

size（空白のサイズ）：

• 0 - margin や padding を 0 に設定するクラス
• 1 - margin や padding を $spacer * .25（デフォルト）に設定するクラス
• 2 - margin や padding を $spacer * .5（デフォルト）に設定するクラス
• 3 - margin や padding を $spacer（デフォルト）に設定するクラス
• 4 - margin や padding を $spacer * 1.5（デフォルト）に設定するクラス
• 5 - margin や padding を $spacer * 3（デフォルト）に設定するクラス
• auto - margin を auto に設定するクラス

（$spacerの基準値は1rem=16px。$spacers Sassマップ変数にエントリーを追加すれば、さらにサイズの追加ができる）

実例（Examples）

これらのクラスの代表的な例をいくつか表示。

Sassでの設定.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

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

外側の空白を設定。

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

設定例

全てのビューポートサイズでマージンを設定<div class="ms-0">ココに表示されます。</div>

特定ビューポートサイズでマージンを設定<div class="ms-sm-0">ココに表示されます。</div>

定義済クラスの種類

パディング（Padding）v5.0.0-alpha1クラス追加

内側の空白を設定。

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

設定例

全てのビューポートサイズでパディングを設定<div class="ps-0">ココに表示されます。</div>

特定ビューポートサイズでパディングを設定<div class="ps-sm-0">ココに表示されます。</div>

定義済クラスの種類

要素の中央揃え（Horizontal centering）

さらに、Bootstrapには、固定幅のブロックレベルのコンテンツを水平にセンタリングするための .mx-auto クラス（つまり、display: block と横方向の空白を auto に設定した幅のコンテンツ）組み込まれている。

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

設定例

<div class="mx-auto p-2" style="width:200px;">
  中央揃えの要素
</div>

マイナスのマージン（Negative margin）v5.0.0-alpha1定義変更、v5.0.0-beta1一部クラス名変更

CSSでは、margin プロパティはマイナスの値が利用できる（padding ではできない）。これらのマイナスのマージンはデフォルトで無効だが、scss/_variables.scss 内の $enable-negative-margins を true に設定し再コンパイルすれば有効になる。

構文はデフォルトのプラスのマージンユーティリティとほぼ同じだが、要求するサイズの前に n が追加される。.mt-1 とは逆のクラスの例：

有効後のCSSの設定

.mt-n1 {
  margin-top: -0.25rem !important;
}

有効後のクラスの種類

ギャップ（Gap）v5.0.0-alpha3新設、v5.3.4設定変更

display: grid や display: flex を使用する場合、親要素で gap ユーティリティが使用できる。これにより、グリッドやflexコンテナの個々の子要素のグリッドアイテムにマージンユーティリティを追加する手間が省ける。ギャップユーティリティはデフォルトでレスポンシブであり、$spacers Sassマップに基づいてユーティリティAPIを経由して生成される。

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

Bootstrap5.3.4～の設定例 緑背景が5.3.4での変更箇所

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">グリッドアイテム 1</div>
  <div class="p-2">グリッドアイテム 2</div>
  <div class="p-2">グリッドアイテム 3</div>
  <div class="p-2">グリッドアイテム 4</div>
</div>

※Bootstrap5.3.3の設定例 赤背景が5.3.4変更箇所

<div class="grid gap-3">
  <div class="p-2 g-col-6">グリッドアイテム 1</div>
  <div class="p-2 g-col-6">グリッドアイテム 2</div>
  <div class="p-2 g-col-6">グリッドアイテム 3</div>
  <div class="p-2 g-col-6">グリッドアイテム 4</div>
</div>

サポートには、Bootstrapのすべてのグリッドブレークポイントのレスポンシブオプションと、$spacers マップの6つのサイズ（0-5）が組み込まれている。.gap-auto ユーティリティクラスは、.gap-0 と実質的に同じなので存在しない。

定義済クラスの種類

上下にギャップ（row-gap）v5.3.0新設、v5.3.4設定変更

row-gap は、指定されたコンテナ内の子アイテム間の垂直方向の間隔を設定。

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

Bootstrap5.3.4～の設定例 緑背景が5.3.4での変更箇所

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">グリッドアイテム 1</div>
  <div class="p-2">グリッドアイテム 2</div>
  <div class="p-2">グリッドアイテム 3</div>
  <div class="p-2">グリッドアイテム 4</div>
</div>

※Bootstrap5.3.3の設定例 赤背景が5.3.4での変更箇所

<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">グリッドアイテム 1</div>
  <div class="p-2 g-col-6">グリッドアイテム 2</div>
  <div class="p-2 g-col-6">グリッドアイテム 3</div>
  <div class="p-2 g-col-6">グリッドアイテム 4</div>
</div>

定義済クラスの種類

左右にギャップ（column-gap）v5.3.0新設、v5.3.4設定変更

column-gap は、指定されたコンテナ内の子アイテム間の水平方向の間隔を設定。

見本

Bootstrap5.3.4～の設定例 緑背景が5.3.4での変更箇所

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">グリッドアイテム 1</div>
  <div class="p-2">グリッドアイテム 2</div>
  <div class="p-2">グリッドアイテム 3</div>
  <div class="p-2">グリッドアイテム 4</div>
</div>

※Bootstrap5.3.3の設定例 赤背景が5.3.4での変更箇所

<div class="grid gap-0 column-gap-3">
  <div class="p-2 g-col-6">グリッドアイテム 1</div>
  <div class="p-2 g-col-6">グリッドアイテム 2</div>
  <div class="p-2 g-col-6">グリッドアイテム 3</div>
  <div class="p-2 g-col-6">グリッドアイテム 4</div>
</div>

定義済クラスの種類

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sassマップ（Sass maps）v5.3.0マップから名称変更

空白ユーティリティはSassマップを経由して宣言され、ユーティリティAPIで生成。

デフォルトの設定

scss/_variables.scss 内 spacer-variables-maps の設定$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

空白ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-spacing の設定"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($spacers, (auto: auto))
),
// マイナスの margin ユーティリティ
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers
),
// Padding ユーティリティ
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers
),
// Gap ユーティリティ
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),