空白ユーティリティ（Spacing） v4.0.0新設 v4.2.1一部追加

使い方（How it works）

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

記法について（Notation）

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

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

property（空白の設定）：

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

sides（空白の方向）：

• t（上） - margin-top または padding-top を設定するクラス
• b（下） - margin-bottom または padding-bottom を設定するクラス
• l（左） - margin-left または padding-left を設定するクラス
• r（右） - margin-right または padding-right を設定するクラス
• 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;
}

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

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

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

マージン（Margin）

外側の空白を設定。

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

設定例

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

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

定義済クラスの種類

パディング（Padding）

内側の空白を設定。

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

設定例

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

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

定義済クラスの種類

要素の中央揃え（Horizontal centering）v4.0.0設定変更

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

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

<div class="center-block" style="width:200px;">
	中央揃えの要素
</div>

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

マイナスのマージン（Negative margin）v4.2.1新設

CSSでは、margin プロパティはマイナスの値が利用可能（padding では不可）。v4.2以降、上記の非ゼロ整数サイズ（1, 2, 3, 4, 5 など）ごとにマイナスのマージンユーティリティを追加。これらのユーティリティは、ブレークポイント間でグリッド列のガターをカスタマイズするのに最適。

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

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

ここでは、Bootstrapグリッドで中（md）のブレークポイント以上にカスタマイズする例を示す。.col のパディングを .px-md-5 で増やし、親要素 .row の .mx-md-n5 でそれを打ち消す。

見本

設定例

コピー<div class="row mx-md-n5">
	<div class="col py-3 px-md-5 border bg-light">カスタム列</div>
	<div class="col py-3 px-md-5 border bg-light">カスタム列</div>
</div>

定義済クラスの種類