メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

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

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

使い方(How it works)

可変性に優れた marginpadding 値を、要素またはその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、.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 または padding0 に設定するクラス
  • 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 - marginauto に設定するクラス

($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)

外側の空白を設定。

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

●左側のマージンを0にする:.ml-0

ココに表示されます。

●左側のマージンを0.25remにする:.ml-1

ココに表示されます。

●左側のマージンを0.5remにする:.ml-2

ココに表示されます。

●左側のマージンを1remにする:.ml-3

ココに表示されます。

●左側のマージンを1.5remにする:.ml-4

ココに表示されます。

●左側のマージンを3remにする:.ml-5

ココに表示されます。

●左側のマージンをautoにする:.ml-auto

ココに表示されます。


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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

設定例
全てのビューポートサイズでマージンを設定<div class="ml-0">ココに表示されます。</div>
特定ビューポートサイズでマージンを設定<div class="ml-sm-0">ココに表示されます。</div>
定義済みクラスの種類
ビューポートサイズ 全て
≥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

【設定】

  • 要素に .m{sides}(-{breakpoint})-{size}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

パディング(Padding)

内側の空白を設定。

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

●左側のパディングを0にする:.pl-0

ココに表示されます。

●左側のパディングを0.25remにする:.pl-1

ココに表示されます。

●左側のパディングを0.5remにする:.pl-2

ココに表示されます。

●左側のパディングを1remにする:.pl-3

ココに表示されます。

●左側のパディングを1.5remにする:.pl-4

ココに表示されます。

●左側のパディングを3remにする:.pl-5

ココに表示されます。


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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

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

ココに表示されます。

設定例
全てのビューポートサイズでパディングを設定<div class="pl-0">ココに表示されます。</div>
特定ビューポートサイズでパディングを設定<div class="pl-sm-0">ココに表示されます。</div>
定義済みクラスの種類
ビューポートサイズ 全て
≥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

【設定】

  • 要素に .p{sides}(-{breakpoint})-{size}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

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

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

見本 見やすいよう領域に枠を付けています
中央揃えの要素
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="center-block" style="width:200px;">
	中央揃えの要素
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="mx-auto" style="width:200px;">
	中央揃えの要素
</div>

【設定】

  • 要素に .mx-auto を入れ、同時にブロック部分の幅(width)を指定

【注意】

【Bootstrap3.xとの変更箇所】

  • .center-block.mx-auto

マイナスのマージン(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 でそれを打ち消す。

見本
カスタム列のpadding
カスタム列のpadding
設定例
<div class="row mx-md-n5">
	<div class="col py-3 px-md-5 border bg-light">カスタム列のpadding</div>
	<div class="col py-3 px-md-5 border bg-light">カスタム列のpadding</div>
</div>
定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
上側のマージンを-0.25rem .mt-n1 .mt-sm-n1 .mt-md-n1 .mt-lg-n1 .mt-xl-n1
右側のマージンを-0.25rem .mr-n1 .mr-sm-n1 .mr-md-n1 .mr-lg-n1 .mr-xl-n1
下側のマージンを-0.25rem .mb-n1 .mb-sm-n1 .mb-md-n1 .mb-lg-n1 .mb-xl-n1
左側のマージンを-0.25rem .ml-n1 .ml-sm-n1 .ml-md-n1 .ml-lg-n1 .ml-xl-n1
左右のマージンを-0.25rem .mx-n1 .mx-sm-n1 .mx-md-n1 .mx-lg-n1 .mx-xl-n1
上下のマージンを-0.25rem .my-n1 .my-sm-n1 .my-md-n1 .my-lg-n1 .my-xl-n1
全方向のマージンを-0.25rem .m-n1 .m-sm-n1 .m-md-n1 .m-lg-n1 .m-xl-n1
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
上側のマージンを-0.5rem .mt-n2 .mt-sm-n2 .mt-md-n2 .mt-lg-n2 .mt-xl-n2
右側のマージンを-0.5rem .mr-n2 .mr-sm-n2 .mr-md-n2 .mr-lg-n2 .mr-xl-n2
下側のマージンを-0.5rem .mb-n2 .mb-sm-n2 .mb-md-n2 .mb-lg-n2 .mb-xl-n2
左側のマージンを-0.5rem .ml-n2 .ml-sm-n2 .ml-md-n2 .ml-lg-n2 .ml-xl-n2
左右のマージンを-0.5rem .mx-n2 .mx-sm-n2 .mx-md-n2 .mx-lg-n2 .mx-xl-n2
上下のマージンを-0.5rem .my-n2 .my-sm-n2 .my-md-n2 .my-lg-n2 .my-xl-n2
全方向のマージンを-0.5rem .m-n2 .m-sm-n2 .m-md-n2 .m-lg-n2 .m-xl-n2
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
上側のマージンを-1rem .mt-n3 .mt-sm-n3 .mt-md-n3 .mt-lg-n3 .mt-xl-n3
右側のマージンを-1rem .mr-n3 .mr-sm-n3 .mr-md-n3 .mr-lg-n3 .mr-xl-n3
下側のマージンを-1rem .mb-n3 .mb-sm-n3 .mb-md-n3 .mb-lg-n3 .mb-xl-n3
左側のマージンを-1rem .ml-n3 .ml-sm-n3 .ml-md-n3 .ml-lg-n3 .ml-xl-n3
左右のマージンを-1rem .mx-n3 .mx-sm-n3 .mx-md-n3 .mx-lg-n3 .mx-xl-n3
上下のマージンを-1rem .my-n3 .my-sm-n3 .my-md-n3 .my-lg-n3 .my-xl-n3
全方向のマージンを-1rem .m-n3 .m-sm-n3 .m-md-n3 .m-lg-n3 .m-xl-n3
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
上側のマージンを-1.5rem .mt-n4 .mt-sm-n4 .mt-md-n4 .mt-lg-n4 .mt-xl-n4
右側のマージンを-1.5rem .mr-n4 .mr-sm-n4 .mr-md-n4 .mr-lg-n4 .mr-xl-n4
下側のマージンを-1.5rem .mb-n4 .mb-sm-n4 .mb-md-n4 .mb-lg-n4 .mb-xl-n4
左側のマージンを-1.5rem .ml-n4 .ml-sm-n4 .ml-md-n4 .ml-lg-n4 .ml-xl-n4
左右のマージンを-1.5rem .mx-n4 .mx-sm-n4 .mx-md-n4 .mx-lg-n4 .mx-xl-n4
上下のマージンを-1.5rem .my-n4 .my-sm-n4 .my-md-n4 .my-lg-n4 .my-xl-n4
全方向のマージンを-1.5rem .m-n4 .m-sm-n4 .m-md-n4 .m-lg-n4 .m-xl-n4
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
上側のマージンを-3rem .mt-n5 .mt-sm-n5 .mt-md-n5 .mt-lg-n5 .mt-xl-n5
右側のマージンを-3rem .mr-n5 .mr-sm-n5 .mr-md-n5 .mr-lg-n5 .mr-xl-n5
下側のマージンを-3rem .mb-n5 .mb-sm-n5 .mb-md-n5 .mb-lg-n5 .mb-xl-n5
左側のマージンを-3rem .ml-n5 .ml-sm-n5 .ml-md-n5 .ml-lg-n5 .ml-xl-n5
左右のマージンを-3rem .mx-n5 .mx-sm-n5 .mx-md-n5 .mx-lg-n5 .mx-xl-n5
上下のマージンを-3rem .my-n5 .my-sm-n5 .my-md-n5 .my-lg-n5 .my-xl-n5
全方向のマージンを-3rem .m-n5 .m-sm-n5 .m-md-n5 .m-lg-n5 .m-xl-n5

【設定】

  • 要素に .m{sides}(-{breakpoint})-n{size}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる