Bootstrap4にはマージン用クラスが用意されています。
クラスに追加するだけでマージンが取られるので、とても便利ですよ。
サンプルも作ってますので一緒に見てくださいね。
次のように指定できます。
- m-1
- m-2
- m-3
- m-4
- m-5
マージンの「m」と領域を表す「1〜5の数字」を指定します。
数字の指定で取られる領域は以下のとおりです。
- 1：0.25rem（通常だと4px）
- 2：0.5rem（通常だと8px）
- 3：1rem（通常だと16px）
- 4：1.5rem（通常だと24px）
- 5：3rem（通常だと48px）
上記だと4つの方向すべてにマージンが取られることになります。
Topにだけマージンを取りたい場合は以下のクラスを指定します。
- mt-1
- mt-2
- mt-3
- mt-4
- mt-5
マージンの「m」の後にTopを表す「t」を付けて最後に数字を付けます。
簡単ですね！
「t」の箇所を変える事で4つの方向すべてに対応できます。
まとめると次のようになります。
- m-x：全方向
- mt-x：Top
- ml-x：Left
- mr-x：Right
- mb-x：Bottom
便利なので使ってみてくださいね。
サンプルも作りました。
