Bootstrapまでは、個別に「mt20」などのクラスを追加して空白を調整していましたが、Bootstrap4では簡潔なレスポンシブマージンとパディングユーティリティクラスが用意されました。
マージン（Margin）
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
|---|---|---|---|---|---|
| 上側のマージンを0 | .mt-0 |
.mt-sm-0 |
.mt-md-0 |
.mt-lg-0 |
.mt-xl-0 |
| 右側のマージンを0 | .mr-0 |
.mr-sm-0 |
.mr-md-0 |
.mr-lg-0 |
.mr-xl-0 |
| 下側のマージンを0 | .mb-0 |
.mb-sm-0 |
.mb-md-0 |
.mb-lg-0 |
.mb-xl-0 |
| 左側のマージンを0 | .ml-0 |
.ml-sm-0 |
.ml-md-0 |
.ml-lg-0 |
.ml-xl-0 |
| 左右のマージンを0 | .mx-0 |
.mx-sm-0 |
.mx-md-0 |
.mx-lg-0 |
.mx-xl-0 |
| 上下のマージンを0 | .my-0 |
.my-sm-0 |
.my-md-0 |
.my-lg-0 |
.my-xl-0 |
| 全方向のマージンを0 | .m-0 |
.m-sm-0 |
.m-md-0 |
.m-lg-0 |
.m-xl-0 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンを0.25rem | .mt-1 |
.mt-sm-1 |
.mt-md-1 |
.mt-lg-1 |
.mt-xl-1 |
| 右側のマージンを0.25rem | .mr-1 |
.mr-sm-1 |
.mr-md-1 |
.mr-lg-1 |
.mr-xl-1 |
| 下側のマージンを0.25rem | .mb-1 |
.mb-sm-1 |
.mb-md-1 |
.mb-lg-1 |
.mb-xl-1 |
| 左側のマージンを0.25rem | .ml-1 |
.ml-sm-1 |
.ml-md-1 |
.ml-lg-1 |
.ml-xl-1 |
| 左右のマージンを0.25rem | .mx-1 |
.mx-sm-1 |
.mx-md-1 |
.mx-lg-1 |
.mx-xl-1 |
| 上下のマージンを0.25rem | .my-1 |
.my-sm-1 |
.my-md-1 |
.my-lg-1 |
.my-xl-1 |
| 全方向のマージンを0.25rem | .m-1 |
.m-sm-1 |
.m-md-1 |
.m-lg-1 |
.m-xl-1 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンを0.5rem | .mt-2 |
.mt-sm-2 |
.mt-md-2 |
.mt-lg-2 |
.mt-xl-2 |
| 右側のマージンを0.5rem | .mr-2 |
.mr-sm-2 |
.mr-md-2 |
.mr-lg-2 |
.mr-xl-2 |
| 下側のマージンを0.5rem | .mb-2 |
.mb-sm-2 |
.mb-md-2 |
.mb-lg-2 |
.mb-xl-2 |
| 左側のマージンを0.5rem | .ml-2 |
.ml-sm-2 |
.ml-md-2 |
.ml-lg-2 |
.ml-xl-2 |
| 左右のマージンを0.5rem | .mx-2 |
.mx-sm-2 |
.mx-md-2 |
.mx-lg-2 |
.mx-xl-2 |
| 上下のマージンを0.5rem | .my-2 |
.my-sm-2 |
.my-md-2 |
.my-lg-2 |
.my-xl-2 |
| 全方向のマージンを0.5rem | .m-2 |
.m-sm-2 |
.m-md-2 |
.m-lg-2 |
.m-xl-2 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンを1rem | .mt-3 |
.mt-sm-3 |
.mt-md-3 |
.mt-lg-3 |
.mt-xl-3 |
| 右側のマージンを1rem | .mr-3 |
.mr-sm-3 |
.mr-md-3 |
.mr-lg-3 |
.mr-xl-3 |
| 下側のマージンを1rem | .mb-3 |
.mb-sm-3 |
.mb-md-3 |
.mb-lg-3 |
.mb-xl-3 |
| 左側のマージンを1rem | .ml-3 |
.ml-sm-3 |
.ml-md-3 |
.ml-lg-3 |
.ml-xl-3 |
| 左右のマージンを1rem | .mx-3 |
.mx-sm-3 |
.mx-md-3 |
.mx-lg-3 |
.mx-xl-3 |
| 上下のマージンを1rem | .my-3 |
.my-sm-3 |
.my-md-3 |
.my-lg-3 |
.my-xl-3 |
| 全方向のマージンを1rem | .m-3 |
.m-sm-3 |
.m-md-3 |
.m-lg-3 |
.m-xl-3 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンを1.5rem | .mt-4 |
.mt-sm-4 |
.mt-md-4 |
.mt-lg-4 |
.mt-xl-4 |
| 右側のマージンを1.5rem | .mr-4 |
.mr-sm-4 |
.mr-md-4 |
.mr-lg-4 |
.mr-xl-4 |
| 下側のマージンを1.5rem | .mb-4 |
.mb-sm-4 |
.mb-md-4 |
.mb-lg-4 |
.mb-xl-4 |
| 左側のマージンを1.5rem | .ml-4 |
.ml-sm-4 |
.ml-md-4 |
.ml-lg-4 |
.ml-xl-4 |
| 左右のマージンを1.5rem | .mx-4 |
.mx-sm-4 |
.mx-md-4 |
.mx-lg-4 |
.mx-xl-4 |
| 上下のマージンを1.5rem | .my-4 |
.my-sm-4 |
.my-md-4 |
.my-lg-4 |
.my-xl-4 |
| 全方向のマージンを1.5rem | .m-4 |
.m-sm-4 |
.m-md-4 |
.m-lg-4 |
.m-xl-4 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンを3rem | .mt-5 |
.mt-sm-5 |
.mt-md-5 |
.mt-lg-5 |
.mt-xl-5 |
| 右側のマージンを3rem | .mr-5 |
.mr-sm-5 |
.mr-md-5 |
.mr-lg-5 |
.mr-xl-5 |
| 下側のマージンを3rem | .mb-5 |
.mb-sm-5 |
.mb-md-5 |
.mb-lg-5 |
.mb-xl-5 |
| 左側のマージンを3rem | .ml-5 |
.ml-sm-5 |
.ml-md-5 |
.ml-lg-5 |
.ml-xl-5 |
| 左右のマージンを3rem | .mx-5 |
.mx-sm-5 |
.mx-md-5 |
.mx-lg-5 |
.mx-xl-5 |
| 上下のマージンを3rem | .my-5 |
.my-sm-5 |
.my-md-5 |
.my-lg-5 |
.my-xl-5 |
| 全方向のマージンを3rem | .m-5 |
.m-sm-5 |
.m-md-5 |
.m-lg-5 |
.m-xl-5 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のマージンをauto | .mt-auto |
.mt-sm-auto |
.mt-md-auto |
.mt-lg-auto |
.mt-xl-auto |
| 右側のマージンをauto | .mr-auto |
.mr-sm-auto |
.mr-md-auto |
.mr-lg-auto |
.mr-xl-auto |
| 下側のマージンをauto | .mb-auto |
.mb-sm-auto |
.mb-md-auto |
.mb-lg-auto |
.mb-xl-auto |
| 左側のマージンをauto | .ml-auto |
.ml-sm-auto |
.ml-md-auto |
.ml-lg-auto |
.ml-xl-auto |
| 左右のマージンをauto | .mx-auto |
.mx-sm-auto |
.mx-md-auto |
.mx-lg-auto |
.mx-xl-auto |
| 上下のマージンをauto | .my-auto |
.my-sm-auto |
.my-md-auto |
.my-lg-auto |
.my-xl-auto |
| 全方向のマージンをauto | .m-auto |
.m-sm-auto |
.m-md-auto |
.m-lg-auto |
.m-xl-auto |
パディング（Padding）
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
|---|---|---|---|---|---|
| 上側のパディングを0 | .pt-0 |
.pt-sm-0 |
.pt-md-0 |
.pt-lg-0 |
.pt-xl-0 |
| 右側のパディングを0 | .pr-0 |
.pr-sm-0 |
.pr-md-0 |
.pr-lg-0 |
.pr-xl-0 |
| 下側のパディングを0 | .pb-0 |
.pb-sm-0 |
.pb-md-0 |
.pb-lg-0 |
.pb-xl-0 |
| 左側のパディングを0 | .pl-0 |
.pl-sm-0 |
.pl-md-0 |
.pl-lg-0 |
.pl-xl-0 |
| 左右のパディングを0 | .px-0 |
.px-sm-0 |
.px-md-0 |
.px-lg-0 |
.px-xl-0 |
| 上下のパディングを0 | .py-0 |
.py-sm-0 |
.py-md-0 |
.py-lg-0 |
.py-xl-0 |
| 全方向のパディングを0 | .p-0 |
.p-sm-0 |
.p-md-0 |
.p-lg-0 |
.p-xl-0 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のパディングを0.25rem | .pt-1 |
.pt-sm-1 |
.pt-md-1 |
.pt-lg-1 |
.pt-xl-1 |
| 右側のパディングを0.25rem | .pr-1 |
.pr-sm-1 |
.pr-md-1 |
.pr-lg-1 |
.pr-xl-1 |
| 下側のパディングを0.25rem | .pb-1 |
.pb-sm-1 |
.pb-md-1 |
.pb-lg-1 |
.pb-xl-1 |
| 左側のパディングを0.25rem | .pl-1 |
.pl-sm-1 |
.pl-md-1 |
.pl-lg-1 |
.pl-xl-1 |
| 左右のパディングを0.25rem | .px-1 |
.px-sm-1 |
.px-md-1 |
.px-lg-1 |
.px-xl-1 |
| 上下のパディングを0.25rem | .py-1 |
.py-sm-1 |
.py-md-1 |
.py-lg-1 |
.py-xl-1 |
| 全方向のパディングを0.25rem | .p-1 |
.p-sm-1 |
.p-md-1 |
.p-lg-1 |
.p-xl-1 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のパディングを0.5rem | .pt-2 |
.pt-sm-2 |
.pt-md-2 |
.pt-lg-2 |
.pt-xl-2 |
| 右側のパディングを0.5rem | .pr-2 |
.pr-sm-2 |
.pr-md-2 |
.pr-lg-2 |
.pr-xl-2 |
| 下側のパディングを0.5rem | .pb-2 |
.pb-sm-2 |
.pb-md-2 |
.pb-lg-2 |
.pb-xl-2 |
| 左側のパディングを0.5rem | .pl-2 |
.pl-sm-2 |
.pl-md-2 |
.pl-lg-2 |
.pl-xl-2 |
| 左右のパディングを0.5rem | .px-2 |
.px-sm-2 |
.px-md-2 |
.px-lg-2 |
.px-xl-2 |
| 上下のパディングを0.5rem | .py-2 |
.py-sm-2 |
.py-md-2 |
.py-lg-2 |
.py-xl-2 |
| 全方向のパディングを0.5rem | .p-2 |
.p-sm-2 |
.p-md-2 |
.p-lg-2 |
.p-xl-2 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のパディングを1rem | .pt-3 |
.pt-sm-3 |
.pt-md-3 |
.pt-lg-3 |
.pt-xl-3 |
| 右側のパディングを1rem | .pr-3 |
.pr-sm-3 |
.pr-md-3 |
.pr-lg-3 |
.pr-xl-3 |
| 下側のパディングを1rem | .pb-3 |
.pb-sm-3 |
.pb-md-3 |
.pb-lg-3 |
.pb-xl-3 |
| 左側のパディングを1rem | .pl-3 |
.pl-sm-3 |
.pl-md-3 |
.pl-lg-3 |
.pl-xl-3 |
| 左右のパディングを1rem | .px-3 |
.px-sm-3 |
.px-md-3 |
.px-lg-3 |
.px-xl-3 |
| 上下のパディングを1rem | .py-3 |
.py-sm-3 |
.py-md-3 |
.py-lg-3 |
.py-xl-3 |
| 全方向のパディングを1rem | .p-3 |
.p-sm-3 |
.p-md-3 |
.p-lg-3 |
.p-xl-3 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のパディングを1.5rem | .pt-4 |
.pt-sm-4 |
.pt-md-4 |
.pt-lg-4 |
.pt-xl-4 |
| 右側のパディングを1.5rem | .pr-4 |
.pr-sm-4 |
.pr-md-4 |
.pr-lg-4 |
.pr-xl-4 |
| 下側のパディングを1.5rem | .pb-4 |
.pb-sm-4 |
.pb-md-4 |
.pb-lg-4 |
.pb-xl-4 |
| 左側のパディングを1.5rem | .pl-4 |
.pl-sm-4 |
.pl-md-4 |
.pl-lg-4 |
.pl-xl-4 |
| 左右のパディングを1.5rem | .px-4 |
.px-sm-4 |
.px-md-4 |
.px-lg-4 |
.px-xl-4 |
| 上下のパディングを1.5rem | .py-4 |
.py-sm-4 |
.py-md-4 |
.py-lg-4 |
.py-xl-4 |
| 全方向のパディングを1.5rem | .p-4 |
.p-sm-4 |
.p-md-4 |
.p-lg-4 |
.p-xl-4 |
| ビューポートサイズ | 全て ≥0px |
小以上 ≥576px |
中以上 ≥768px |
大以上 ≥992px |
特大 ≥1200px |
| 上側のパディングを3rem | .pt-5 |
.pt-sm-5 |
.pt-md-5 |
.pt-lg-5 |
.pt-xl-5 |
| 右側のパディングを3rem | .pr-5 |
.pr-sm-5 |
.pr-md-5 |
.pr-lg-5 |
.pr-xl-5 |
| 下側のパディングを3rem | .pb-5 |
.pb-sm-5 |
.pb-md-5 |
.pb-lg-5 |
.pb-xl-5 |
| 左側のパディングを3rem | .pl-5 |
.pl-sm-5 |
.pl-md-5 |
.pl-lg-5 |
.pl-xl-5 |
| 左右のパディングを3rem | .px-5 |
.px-sm-5 |
.px-md-5 |
.px-lg-5 |
.px-xl-5 |
| 上下のパディングを3rem | .py-5 |
.py-sm-5 |
.py-md-5 |
.py-lg-5 |
.py-xl-5 |
| 全方向のパディングを3rem | .p-5 |
.p-sm-5 |
.p-md-5 |
.p-lg-5 |
.p-xl-5 |
コメント