メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

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

Bootstrapには、要素の外観を変更するための幅広い簡潔なレスポンシブマージンとパディングユーティリティクラスが組み込まれている。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

マージンとパディング(Margin and padding)

可変性に優れた marginpadding 値を、要素かその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、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-toppadding-top を設定するクラス
  • b(下:bottom) - margin-bottompadding-bottom を設定するクラス
  • s(行頭:start)v5.0.0-beta1設定変更 - LTR(左書き)で margin-leftpadding-left を設定し、RTL(右書き)で margin-rightpadding-right を設定するクラス
  • e(行末:end)v5.0.0-beta1設定変更 - LTR(左書き)で margin-rightpadding-right を設定し、RTL(右書き)で margin-leftpadding-left を設定するクラス
  • x(左右) - *-left*-right の両方を設定するクラス
  • y(上下) - *-top*-bottom の両方を設定するクラス
  • 「なし」(上下左右) - 要素の4方向すべてに marginpadding を設定するクラス

size(空白のサイズ):

  • 0 - marginpadding0 に設定するクラス
  • 1 - marginpadding$spacer * .25(デフォルト)に設定するクラス
  • 2 - marginpadding$spacer * .5(デフォルト)に設定するクラス
  • 3 - marginpadding$spacer(デフォルト)に設定するクラス
  • 4 - marginpadding$spacer * 1.5(デフォルト)に設定するクラス
  • 5 - marginpadding$spacer * 3(デフォルト)に設定するクラス
  • auto - marginauto に設定するクラス

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

【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いsides(空白の方向)のクラス名変更
      • l(左:left) ⇒ s(行頭:start)
      • r(右:right) ⇒ e(行末:end)

実例(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一部クラス名変更

外側の空白を設定。

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

行頭側のマージンを0にする:.ms-0

ココに表示されます。

行頭側のマージンを0.25remにする:.ms-1

ココに表示されます。

行頭側のマージンを0.5remにする:.ms-2

ココに表示されます。

行頭側のマージンを1remにする:.ms-3

ココに表示されます。

行頭側のマージンを1.5remにする:.ms-4

ココに表示されます。

行頭側のマージンを3remにする:.ms-5

ココに表示されます。

行頭側のマージンをautoにする:.ms-auto

ココに表示されます。

全てのビューポートサイズで行頭側のマージンを1remにする:.ms-3

ココに表示されます。

ビューポートサイズ小以上で行頭側のマージンを1remにする:.ms-sm-3

ココに表示されます。

ビューポートサイズ中以上で行頭側のマージンを1remにする:.ms-md-3

ココに表示されます。

ビューポートサイズ大以上で行頭側のマージンを1remにする:.ms-lg-3

ココに表示されます。

ビューポートサイズ特大以上で行頭側のマージンを1remにする:.ms-xl-3

ココに表示されます。

ビューポートサイズ特大以上で行頭側のマージンを1remにする:.ms-xxl-3

ココに表示されます。
設定例
全てのビューポートサイズでマージンを設定<div class="ms-0">ココに表示されます。</div>
特定ビューポートサイズでマージンを設定<div class="ms-sm-0">ココに表示されます。</div>
定義済クラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
上側のマージンを0 .mt-0 .mt-sm-0 .mt-md-0 .mt-lg-0 .mt-xl-0 .mt-xxl-0
行末側のマージンを0
v5.0.0-beta1クラス名変更
.me-0 .me-sm-0 .me-md-0 .me-lg-0 .me-xl-0 .me-xxl-0
下側のマージンを0 .mb-0 .mb-sm-0 .mb-md-0 .mb-lg-0 .mb-xl-0 .mb-xxl-0
行頭側のマージンを0
v5.0.0-beta1クラス名変更
.ms-0 .ms-sm-0 .ms-md-0 .ms-lg-0 .ms-xl-0 .ms-xxl-0
左右のマージンを0 .mx-0 .mx-sm-0 .mx-md-0 .mx-lg-0 .mx-xl-0 .mx-xxl-0
上下のマージンを0 .my-0 .my-sm-0 .my-md-0 .my-lg-0 .my-xl-0 .my-xxl-0
全方向のマージンを0 .m-0 .m-sm-0 .m-md-0 .m-lg-0 .m-xl-0 .m-xxl-0
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを0.25rem .mt-1 .mt-sm-1 .mt-md-1 .mt-lg-1 .mt-xl-1 .mt-xxl-1
行末側のマージンを0.25rem
v5.0.0-beta1クラス名変更
.me-1 .me-sm-1 .me-md-1 .me-lg-1 .me-xl-1 .me-xxl-1
下側のマージンを0.25rem .mb-1 .mb-sm-1 .mb-md-1 .mb-lg-1 .mb-xl-1 .mb-xxl-1
行頭側のマージンを0.25rem
v5.0.0-beta1クラス名変更
.ms-1 .ms-sm-1 .ms-md-1 .ms-lg-1 .ms-xl-1 .ms-xxl-1
左右のマージンを0.25rem .mx-1 .mx-sm-1 .mx-md-1 .mx-lg-1 .mx-xl-1 .mx-xxl-1
上下のマージンを0.25rem .my-1 .my-sm-1 .my-md-1 .my-lg-1 .my-xl-1 .my-xxl-1
全方向のマージンを0.25rem .m-1 .m-sm-1 .m-md-1 .m-lg-1 .m-xl-1 .m-xxl-1
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを0.5rem .mt-2 .mt-sm-2 .mt-md-2 .mt-lg-2 .mt-xl-2 .mt-xxl-2
行末側のマージンを0.5rem
v5.0.0-beta1クラス名変更
.me-2 .me-sm-2 .me-md-2 .me-lg-2 .me-xl-2 .me-xxl-2
下側のマージンを0.5rem .mb-2 .mb-sm-2 .mb-md-2 .mb-lg-2 .mb-xl-2 .mb-xxl-2
行頭側のマージンを0.5rem
v5.0.0-beta1クラス名変更
.ms-2 .ms-sm-2 .ms-md-2 .ms-lg-2 .ms-xl-2 .ms-xxl-2
左右のマージンを0.5rem .mx-2 .mx-sm-2 .mx-md-2 .mx-lg-2 .mx-xl-2 .mx-xxl-2
上下のマージンを0.5rem .my-2 .my-sm-2 .my-md-2 .my-lg-2 .my-xl-2 .my-xxl-2
全方向のマージンを0.5rem .m-2 .m-sm-2 .m-md-2 .m-lg-2 .m-xl-2 .m-xxl-2
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを1rem .mt-3 .mt-sm-3 .mt-md-3 .mt-lg-3 .mt-xl-3 .mt-xxl-3
行末側のマージンを1rem
v5.0.0-beta1クラス名変更
.me-3 .me-sm-3 .me-md-3 .me-lg-3 .me-xl-3 .me-xxl-3
下側のマージンを1rem .mb-3 .mb-sm-3 .mb-md-3 .mb-lg-3 .mb-xl-3 .mb-xxl-3
行頭側のマージンを1rem
v5.0.0-beta1クラス名変更
.ms-3 .ms-sm-3 .ms-md-3 .ms-lg-3 .ms-xl-3 .ms-xxl-3
左右のマージンを1rem .mx-3 .mx-sm-3 .mx-md-3 .mx-lg-3 .mx-xl-3 .mx-xxl-3
上下のマージンを1rem .my-3 .my-sm-3 .my-md-3 .my-lg-3 .my-xl-3 .my-xxl-3
全方向のマージンを1rem .m-3 .m-sm-3 .m-md-3 .m-lg-3 .m-xl-3 .m-xxl-3
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを1.5rem .mt-4 .mt-sm-4 .mt-md-4 .mt-lg-4 .mt-xl-4 .mt-xxl-4
行末側のマージンを1.5rem
v5.0.0-beta1クラス名変更
.me-4 .me-sm-4 .me-md-4 .me-lg-4 .me-xl-4 .me-xxl-4
下側のマージンを1.5rem .mb-4 .mb-sm-4 .mb-md-4 .mb-lg-4 .mb-xl-4 .mb-xxl-4
行頭側のマージンを1.5rem
v5.0.0-beta1クラス名変更
.ms-4 .ms-sm-4 .ms-md-4 .ms-lg-4 .ms-xl-4 .ms-xxl-4
左右のマージンを1.5rem .mx-4 .mx-sm-4 .mx-md-4 .mx-lg-4 .mx-xl-4 .mx-xxl-4
上下のマージンを1.5rem .my-4 .my-sm-4 .my-md-4 .my-lg-4 .my-xl-4 .my-xxl-4
全方向のマージンを1.5rem .m-4 .m-sm-4 .m-md-4 .m-lg-4 .m-xl-4 .m-xxl-4
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを3rem .mt-5 .mt-sm-5 .mt-md-5 .mt-lg-5 .mt-xl-5 .mt-xxl-5
行末側のマージンを3rem
v5.0.0-beta1クラス名変更
.me-5 .me-sm-5 .me-md-5 .me-lg-5 .me-xl-5 .me-xxl-5
下側のマージンを3rem .mb-5 .mb-sm-5 .mb-md-5 .mb-lg-5 .mb-xl-5 .mb-xxl-5
行頭側のマージンを3rem
v5.0.0-beta1クラス名変更
.ms-5 .ms-sm-5 .ms-md-5 .ms-lg-5 .ms-xl-5 .ms-xxl-5
左右のマージンを3rem .mx-5 .mx-sm-5 .mx-md-5 .mx-lg-5 .mx-xl-5 .mx-xxl-5
上下のマージンを3rem .my-5 .my-sm-5 .my-md-5 .my-lg-5 .my-xl-5 .my-xxl-5
全方向のマージンを3rem .m-5 .m-sm-5 .m-md-5 .m-lg-5 .m-xl-5 .m-xxl-5
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンをauto .mt-auto .mt-sm-auto .mt-md-auto .mt-lg-auto .mt-xl-auto .mt-xxl-auto
行末側のマージンをauto
v5.0.0-beta1クラス名変更
.me-auto .me-sm-auto .me-md-auto .me-lg-auto .me-xl-auto .me-xxl-auto
下側のマージンをauto .mb-auto .mb-sm-auto .mb-md-auto .mb-lg-auto .mb-xl-auto .mb-xxl-auto
行頭側のマージンをauto
v5.0.0-beta1クラス名変更
.ms-auto .ms-sm-auto .ms-md-auto .ms-lg-auto .ms-xl-auto .ms-xxl-auto
左右のマージンをauto .mx-auto .mx-sm-auto .mx-md-auto .mx-lg-auto .mx-xl-auto .mx-xxl-auto
上下のマージンをauto .my-auto .my-sm-auto .my-md-auto .my-lg-auto .my-xl-auto .my-xxl-auto
全方向のマージンをauto .m-auto .m-sm-auto .m-md-auto .m-lg-auto .m-xl-auto .m-xxl-auto
【設定】
  • 要素に .m{sides}(-{breakpoint})-{size}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
    • {size}(空白のサイズ)は、0~5の整数とautoから選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • .m{sides}-xxl-{size} が追加
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いクラス名変更
      • 行頭側のマージン:.ml(-{breakpoint})-{size}.ms(-{breakpoint})-{size}
      • 行末側のマージン:.mr(-{breakpoint})-{size}.me(-{breakpoint})-{size}

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

内側の空白を設定。

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

行頭側のパディングを0にする:.ps-0

ココに表示されます。

行頭側のパディングを0.25remにする:.ps-1

ココに表示されます。

行頭側のパディングを0.5remにする:.ps-2

ココに表示されます。

行頭側のパディングを1remにする:.ps-3

ココに表示されます。

行頭側のパディングを1.5remにする:.ps-4

ココに表示されます。

行頭側のパディングを3remにする:.ps-5

ココに表示されます。

全てのビューポートサイズで行頭側のパディングを1remにする:.ps-3

ココに表示されます。

ビューポートサイズ小以上で行頭側のパディングを1remにする:.ps-sm-3

ココに表示されます。

ビューポートサイズ中以上で行頭側のパディングを1remにする:.ps-md-3

ココに表示されます。

ビューポートサイズ大以上で行頭側のパディングを1remにする:.ps-lg-3

ココに表示されます。

ビューポートサイズ特大以上で行頭側のパディングを1remにする:.ps-xl-3

ココに表示されます。
設定例
全てのビューポートサイズでパディングを設定<div class="ps-0">ココに表示されます。</div>
特定ビューポートサイズでパディングを設定<div class="ps-sm-0">ココに表示されます。</div>
定義済クラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
上側のパディングを0 .pt-0 .pt-sm-0 .pt-md-0 .pt-lg-0 .pt-xl-0 .pt-xxl-0
行末側のパディングを0
v5.0.0-beta1クラス名変更
.pe-0 .pe-sm-0 .pe-md-0 .pe-lg-0 .pe-xl-0 .pe-xxl-0
下側のパディングを0 .pb-0 .pb-sm-0 .pb-md-0 .pb-lg-0 .pb-xl-0 .pb-xxl-0
行頭側のパディングを0
v5.0.0-beta1クラス名変更
.ps-0 .ps-sm-0 .ps-md-0 .ps-lg-0 .ps-xl-0 .ps-xxl-0
左右のパディングを0 .px-0 .px-sm-0 .px-md-0 .px-lg-0 .px-xl-0 .px-xxl-0
上下のパディングを0 .py-0 .py-sm-0 .py-md-0 .py-lg-0 .py-xl-0 .py-xxl-0
全方向のパディングを0 .p-0 .p-sm-0 .p-md-0 .p-lg-0 .p-xl-0 .p-xxl-0
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のパディングを0.25rem .pt-1 .pt-sm-1 .pt-md-1 .pt-lg-1 .pt-xl-1 .pt-xxl-1
行末側のパディングを0.25rem
v5.0.0-beta1クラス名変更
.pe-1 .pe-sm-1 .pe-md-1 .pe-lg-1 .pe-xl-1 .pe-xxl-1
下側のパディングを0.25rem .pb-1 .pb-sm-1 .pb-md-1 .pb-lg-1 .pb-xl-1 .pb-xxl-1
行頭側のパディングを0.25rem
v5.0.0-beta1クラス名変更
.ps-1 .ps-sm-1 .ps-md-1 .ps-lg-1 .ps-xl-1 .ps-xxl-1
左右のパディングを0.25rem .px-1 .px-sm-1 .px-md-1 .px-lg-1 .px-xl-1 .px-xxl-1
上下のパディングを0.25rem .py-1 .py-sm-1 .py-md-1 .py-lg-1 .py-xl-1 .py-xxl-1
全方向のパディングを0.25rem .p-1 .p-sm-1 .p-md-1 .p-lg-1 .p-xl-1 .p-xxl-1
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のパディングを0.5rem .pt-2 .pt-sm-2 .pt-md-2 .pt-lg-2 .pt-xl-2 .pt-xxl-2
行末側のパディングを0.5rem
v5.0.0-beta1クラス名変更
.pe-2 .pe-sm-2 .pe-md-2 .pe-lg-2 .pe-xl-2 .pe-xxl-2
下側のパディングを0.5rem .pb-2 .pb-sm-2 .pb-md-2 .pb-lg-2 .pb-xl-2 .pb-xxl-2
行頭側のパディングを0.5rem
v5.0.0-beta1クラス名変更
.ps-2 .ps-sm-2 .ps-md-2 .ps-lg-2 .ps-xl-2 .ps-xxl-2
左右のパディングを0.5rem .px-2 .px-sm-2 .px-md-2 .px-lg-2 .px-xl-2 .px-xxl-2
上下のパディングを0.5rem .py-2 .py-sm-2 .py-md-2 .py-lg-2 .py-xl-2 .py-xxl-2
全方向のパディングを0.5rem .p-2 .p-sm-2 .p-md-2 .p-lg-2 .p-xl-2 .p-xxl-2
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のパディングを1rem .pt-3 .pt-sm-3 .pt-md-3 .pt-lg-3 .pt-xl-3 .pt-xxl-3
行末側のパディングを1rem
v5.0.0-beta1クラス名変更
.pe-3 .pe-sm-3 .pe-md-3 .pe-lg-3 .pe-xl-3 .pe-xxl-3
下側のパディングを1rem .pb-3 .pb-sm-3 .pb-md-3 .pb-lg-3 .pb-xl-3 .pb-xxl-3
行頭側のパディングを1rem
v5.0.0-beta1クラス名変更
.ps-3 .ps-sm-3 .ps-md-3 .ps-lg-3 .ps-xl-3 .ps-xxl-3
左右のパディングを1rem .px-3 .px-sm-3 .px-md-3 .px-lg-3 .px-xl-3 .px-xxl-3
上下のパディングを1rem .py-3 .py-sm-3 .py-md-3 .py-lg-3 .py-xl-3 .py-xxl-3
全方向のパディングを1rem .p-3 .p-sm-3 .p-md-3 .p-lg-3 .p-xl-3 .p-xxl-3
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のパディングを1.5rem .pt-4 .pt-sm-4 .pt-md-4 .pt-lg-4 .pt-xl-4 .pt-xxl-4
行末側のパディングを1.5rem
v5.0.0-beta1クラス名変更
.pe-4 .pe-sm-4 .pe-md-4 .pe-lg-4 .pe-xl-4 .pe-xxl-4
下側のパディングを1.5rem .pb-4 .pb-sm-4 .pb-md-4 .pb-lg-4 .pb-xl-4 .pb-xxl-4
行頭側のパディングを1.5rem
v5.0.0-beta1クラス名変更
.ps-4 .ps-sm-4 .ps-md-4 .ps-lg-4 .ps-xl-4 .ps-xxl-4
左右のパディングを1.5rem .px-4 .px-sm-4 .px-md-4 .px-lg-4 .px-xl-4 .px-xxl-4
上下のパディングを1.5rem .py-4 .py-sm-4 .py-md-4 .py-lg-4 .py-xl-4 .py-xxl-4
全方向のパディングを1.5rem .p-4 .p-sm-4 .p-md-4 .p-lg-4 .p-xl-4 .p-xxl-4
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のパディングを3rem .pt-5 .pt-sm-5 .pt-md-5 .pt-lg-5 .pt-xl-5 .pt-xxl-5
行末側のパディングを3rem
v5.0.0-beta1クラス名変更
.pe-5 .pe-sm-5 .pe-md-5 .pe-lg-5 .pe-xl-5 .pe-xxl-5
下側のパディングを3rem .pb-5 .pb-sm-5 .pb-md-5 .pb-lg-5 .pb-xl-5 .pb-xxl-5
行頭側のパディングを3rem
v5.0.0-beta1クラス名変更
.ps-5 .ps-sm-5 .ps-md-5 .ps-lg-5 .ps-xl-5 .ps-xxl-5
左右のパディングを3rem .px-5 .px-sm-5 .px-md-5 .px-lg-5 .px-xl-5 .px-xxl-5
上下のパディングを3rem .py-5 .py-sm-5 .py-md-5 .py-lg-5 .py-xl-5 .py-xxl-5
全方向のパディングを3rem .p-5 .p-sm-5 .p-md-5 .p-lg-5 .p-xl-5 .p-xxl-5
【設定】
  • 要素に .p{sides}(-{breakpoint})-{size}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
    • {size}(空白のサイズ)は、0~5の整数から選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • .p{sides}-xxl-{size} が追加
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いクラス名変更
      • 行頭側のパディング:.pl(-{breakpoint})-{size}.ps(-{breakpoint})-{size}
      • 行末側のパディング:.pr(-{breakpoint})-{size}.pe(-{breakpoint})-{size}

要素の中央揃え(Horizontal centering)

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

見本 見やすいよう領域に色と枠を付けています
中央揃えの要素
設定例
<div class="mx-auto p-2" style="width:200px;">
  中央揃えの要素
</div>
【設定】
  • 要素に .mx-auto を入れ、同時にブロック部分の幅(width)を指定
【注意】

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

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

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

有効後のCSSの設定
.mt-n1 {
  margin-top: -0.25rem !important;
}
有効後のクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを-0.25rem .mt-n1 .mt-sm-n1 .mt-md-n1 .mt-lg-n1 .mt-xl-n1 .mt-xxl-n1
行末側のマージンを-0.25rem .me-n1 .me-sm-n1 .me-md-n1 .me-lg-n1 .me-xl-n1 .me-xxl-n1
下側のマージンを-0.25rem .mb-n1 .mb-sm-n1 .mb-md-n1 .mb-lg-n1 .mb-xl-n1 .mb-xxl-n1
行頭側のマージンを-0.25rem .ms-n1 .ms-sm-n1 .ms-md-n1 .ms-lg-n1 .ms-xl-n1 .ms-xxl-n1
左右のマージンを-0.25rem .mx-n1 .mx-sm-n1 .mx-md-n1 .mx-lg-n1 .mx-xl-n1 .mx-xxl-n1
上下のマージンを-0.25rem .my-n1 .my-sm-n1 .my-md-n1 .my-lg-n1 .my-xl-n1 .my-xxl-n1
全方向のマージンを-0.25rem .m-n1 .m-sm-n1 .m-md-n1 .m-lg-n1 .m-xl-n1 .m-xxl-n1
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを-0.5rem .mt-n2 .mt-sm-n2 .mt-md-n2 .mt-lg-n2 .mt-xl-n2 .mt-xxl-n2
行末側のマージンを-0.5rem .me-n2 .me-sm-n2 .me-md-n2 .me-lg-n2 .me-xl-n2 .me-xxl-n2
下側のマージンを-0.5rem .mb-n2 .mb-sm-n2 .mb-md-n2 .mb-lg-n2 .mb-xl-n2 .mb-xxl-n2
行頭側のマージンを-0.5rem .ms-n2 .ms-sm-n2 .ms-md-n2 .ms-lg-n2 .ms-xl-n2 .ms-xxl-n2
左右のマージンを-0.5rem .mx-n2 .mx-sm-n2 .mx-md-n2 .mx-lg-n2 .mx-xl-n2 .mx-xxl-n2
上下のマージンを-0.5rem .my-n2 .my-sm-n2 .my-md-n2 .my-lg-n2 .my-xl-n2 .my-xxl-n2
全方向のマージンを-0.5rem .m-n2 .m-sm-n2 .m-md-n2 .m-lg-n2 .m-xl-n2 .m-xxl-n2
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを-1rem .mt-n3 .mt-sm-n3 .mt-md-n3 .mt-lg-n3 .mt-xl-n3 .mt-xxl-n3
行末側のマージンを-1rem .me-n3 .me-sm-n3 .me-md-n3 .me-lg-n3 .me-xl-n3 .me-xxl-n3
下側のマージンを-1rem .mb-n3 .mb-sm-n3 .mb-md-n3 .mb-lg-n3 .mb-xl-n3 .mb-xxl-n3
行頭側のマージンを-1rem .ms-n3 .ms-sm-n3 .ms-md-n3 .ms-lg-n3 .ms-xl-n3 .ms-xxl-n3
左右のマージンを-1rem .mx-n3 .mx-sm-n3 .mx-md-n3 .mx-lg-n3 .mx-xl-n3 .mx-xxl-n3
上下のマージンを-1rem .my-n3 .my-sm-n3 .my-md-n3 .my-lg-n3 .my-xl-n3 .my-xxl-n3
全方向のマージンを-1rem .m-n3 .m-sm-n3 .m-md-n3 .m-lg-n3 .m-xl-n3 .m-xxl-n3
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを-1.5rem .mt-n4 .mt-sm-n4 .mt-md-n4 .mt-lg-n4 .mt-xl-n4 .mt-xxl-n4
行末側のマージンを-1.5rem .me-n4 .me-sm-n4 .me-md-n4 .me-lg-n4 .me-xl-n4 .me-xxl-n4
下側のマージンを-1.5rem .mb-n4 .mb-sm-n4 .mb-md-n4 .mb-lg-n4 .mb-xl-n4 .mb-xxl-n4
行頭側のマージンを-1.5rem .ms-n4 .ms-sm-n4 .ms-md-n4 .ms-lg-n4 .ms-xl-n4 .ms-xxl-n4
左右のマージンを-1.5rem .mx-n4 .mx-sm-n4 .mx-md-n4 .mx-lg-n4 .mx-xl-n4 .mx-xxl-n4
上下のマージンを-1.5rem .my-n4 .my-sm-n4 .my-md-n4 .my-lg-n4 .my-xl-n4 .my-xxl-n4
全方向のマージンを-1.5rem .m-n4 .m-sm-n4 .m-md-n4 .m-lg-n4 .m-xl-n4 .m-xxl-n4
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大
≥1400px
上側のマージンを-3rem .mt-n5 .mt-sm-n5 .mt-md-n5 .mt-lg-n5 .mt-xl-n5 .mt-xxl-n5
行末側のマージンを-3rem .me-n5 .me-sm-n5 .me-md-n5 .me-lg-n5 .me-xl-n5 .me-xxl-n5
下側のマージンを-3rem .mb-n5 .mb-sm-n5 .mb-md-n5 .mb-lg-n5 .mb-xl-n5 .mb-xxl-n5
行頭側のマージンを-3rem .ms-n5 .ms-sm-n5 .ms-md-n5 .ms-lg-n5 .ms-xl-n5 .ms-xxl-n5
左右のマージンを-3rem .mx-n5 .mx-sm-n5 .mx-md-n5 .mx-lg-n5 .mx-xl-n5 .mx-xxl-n5
上下のマージンを-3rem .my-n5 .my-sm-n5 .my-md-n5 .my-lg-n5 .my-xl-n5 .my-xxl-n5
全方向のマージンを-3rem .m-n5 .m-sm-n5 .m-md-n5 .m-lg-n5 .m-xl-n5 .m-xxl-n5
【設定】
  • 要素に .m{sides}(-{breakpoint})-n{size}(上記の「有効後のクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
    • {size}(空白のサイズ)は、0~5の整数から選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • .css ファイルのサイズが大きくなるので、デフォルトではクラスは生成されなくなった(設定を有効にする必要あり)
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いクラス名変更
      • 行頭側のマージン:.ml(-{breakpoint})-n{size}.ms(-{breakpoint})-n{size}
      • 行末側のマージン:.mr(-{breakpoint})-n{size}.me(-{breakpoint})-n{size}

ギャップ(Gap)v5.0.0-alpha3新設、v5.3.0設定変更

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

見本見やすいよう色と枠を付けています
グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 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 と実質的に同じなので存在しない。

定義済クラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
アイテム間のギャップが0
gap: 0
.gap-0 .gap-sm-0 .gap-md-0 .gap-lg-0 .gap-xl-0 .gap-xxl-0
アイテム間のギャップが0.25rem
gap: 0.25rem
.gap-1 .gap-sm-1 .gap-md-1 .gap-lg-1 .gap-xl-1 .gap-xxl-1
アイテム間のギャップが0.5rem
gap: 0.5rem
.gap-2 .gap-sm-2 .gap-md-2 .gap-lg-2 .gap-xl-2 .gap-xxl-2
アイテム間のギャップが1rem
gap: 1rem
.gap-3 .gap-sm-3 .gap-md-3 .gap-lg-3 .gap-xl-3 .gap-xxl-3
アイテム間のギャップが1.5rem
gap: 1.5rem
.gap-4 .gap-sm-4 .gap-md-4 .gap-lg-4 .gap-xl-4 .gap-xxl-4
アイテム間のギャップが3rem
gap: 3rem
.gap-5 .gap-sm-5 .gap-md-5 .gap-lg-5 .gap-xl-5 .gap-xxl-5
【設定】
  • display: grid(グリッド表示:.d-grid, .grid など)や display: flex(flexコンテナ表示:.d-flex など)と同じ要素に .gap(-{breakpoint})-{size}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
    • {size}(空白のサイズ)は、0~5の整数から選択
【変更履歴】
  • 【v5.3.0】
    • display: grid の要素だけでなく、display: flex の要素でも使用可能に

上下にギャップ(row-gap)v5.3.0新設

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

見本見やすいよう色と枠を付けています
グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 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>
定義済クラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
アイテム間の上下のギャップが
0(row-gap: 0
.row-gap-0 .row-gap-sm-0 .row-gap-md-0 .row-gap-lg-0 .row-gap-xl-0 .row-gap-xxl-0
アイテム間の上下のギャップが
0.25rem(row-gap: 0.25rem
.row-gap-1 .row-gap-sm-1 .row-gap-md-1 .row-gap-lg-1 .row-gap-xl-1 .row-gap-xxl-1
アイテム間の上下のギャップが
0.5rem(row-gap: 0.5rem
.row-gap-2 .row-gap-sm-2 .row-gap-md-2 .row-gap-lg-2 .row-gap-xl-2 .row-gap-xxl-2
アイテム間の上下のギャップが
1rem(row-gap: 1rem
.row-gap-3 .row-gap-sm-3 .row-gap-md-3 .row-gap-lg-3 .row-gap-xl-3 .row-gap-xxl-3
アイテム間の上下のギャップが
1.5rem(row-gap: 1.5rem
.row-gap-4 .row-gap-sm-4 .row-gap-md-4 .row-gap-lg-4 .row-gap-xl-4 .row-gap-xxl-4
アイテム間の上下のギャップが
3rem(row-gap: 3rem
.row-gap-5 .row-gap-sm-5 .row-gap-md-5 .row-gap-lg-5 .row-gap-xl-5 .row-gap-xxl-5
【設定】
  • 上下のギャップだけ設定したい場合は、.gap(-{breakpoint})-0.row-gap(-{breakpoint})-{size}(上記の「定義済クラスの種類」から選択)を追加

左右にギャップ(column-gap)v5.3.0新設

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

見本
グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 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>
定義済クラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
アイテム間の左右のギャップが
0(column-gap: 0
.column-gap-0 .column-gap-sm-0 .column-gap-md-0 .column-gap-lg-0 .column-gap-xl-0 .column-gap-xxl-0
アイテム間の左右のギャップが
0.25rem(column-gap: 0.25rem
.column-gap-1 .column-gap-sm-1 .column-gap-md-1 .column-gap-lg-1 .column-gap-xl-1 .column-gap-xxl-1
アイテム間の左右のギャップが
0.5rem(column-gap: 0.5rem
.column-gap-2 .column-gap-sm-2 .column-gap-md-2 .column-gap-lg-2 .column-gap-xl-2 .column-gap-xxl-2
アイテム間の左右のギャップが
1rem(column-gap: 1rem
.column-gap-3 .column-gap-sm-3 .column-gap-md-3 .column-gap-lg-3 .column-gap-xl-3 .column-gap-xxl-3
アイテム間の左右のギャップが
1.5rem(column-gap: 1.5rem
.column-gap-4 .column-gap-sm-4 .column-gap-md-4 .column-gap-lg-4 .column-gap-xl-4 .column-gap-xxl-4
アイテム間の左右のギャップが
3rem(column-gap: 3rem
.column-gap-5 .column-gap-sm-5 .column-gap-md-5 .column-gap-lg-5 .column-gap-xl-5 .column-gap-xxl-5
【設定】
  • 左右のギャップだけ設定したい場合は、.gap(-{breakpoint})-0.column-gap(-{breakpoint})-{size}(上記の「定義済クラスの種類」から選択)を追加

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
),