Margin CSS

Bootstrapではマージン(要素の外側の余白)を指定できるユーティリティクラスが用意されています。

Cheat sheet

Bootstrap CSSフレームワークでは、次のクラスを指定することによってマージンを設定できます。

方向
サイズ
<div class="m-auto border">Margin</div>
Margin

Class

マージンを指定するために、次のユーティリティクラスを用意されています。

Bootstrapのmarginクラス
クラス CSSプロパティ
m-auto margin: auto;
m-0 margin: 0;
m-1 margin: 0.25rem;
m-2 margin: 0.5rem;
m-3 margin: 1rem;
m-4 margin: 1.5rem;
m-5 margin: 3rem;
mt-auto margin-top: auto;
mt-0 margin-top: 0;
mt-1 margin-top: 0.25rem;
mt-2 margin-top: 0.5rem;
mt-3 margin-top: 1rem;
mt-4 margin-top: 1.5rem;
mt-5 margin-top: 3rem;
mr-auto margin-right: auto;
mr-0 margin-right: 0;
mr-1 margin-right: 0.25rem;
mr-2 margin-right: 0.5rem;
mr-3 margin-right: 1rem;
mr-4 margin-right: 1.5rem;
mr-5 margin-right: 3rem;
mb-auto margin-bottom: auto;
mb-0 margin-bottom: 0;
mb-1 margin-bottom: 0.25rem;
mb-2 margin-bottom: 0.5rem;
mb-3 margin-bottom: 1rem;
mb-4 margin-bottom: 1.5rem;
mb-5 margin-bottom: 3rem;
ml-auto margin-left: auto;
ml-0 margin-left: 0;
ml-1 margin-left: 0.25rem;
ml-2 margin-left: 0.5rem;
ml-3 margin-left: 1rem;
ml-4 margin-left: 1.5rem;
ml-5 margin-left: 3rem;
mx-auto margin-right: auto;
margin-left: auto;
mx-0 margin-right: 0;
margin-left: 0;
mx-1 margin-right: 0.25rem;
margin-left: 0.25rem;
mx-2 margin-right: 0.5rem;
margin-left: 0.5rem;
mx-3 margin-right: 1rem;
margin-left: 1rem;
mx-4 margin-right: 1.5rem;
margin-left: 1.5rem;
mx-5 margin-right: 3rem;
margin-left: 3rem;
my-auto margin-top: auto;
margin-bottom: auto;
my-0 margin-top: 0;
margin-bottom: 0;
my-1 margin-top: 0.25rem;
margin-bottom: 0.25rem;
my-2 margin-top: 0.5rem;
margin-bottom: 0.5rem;
my-3 margin-top: 1rem;
margin-bottom: 1rem;
my-4 margin-top: 1.5rem;
margin-bottom: 1.5rem;
my-5 margin-top: 3rem;
margin-bottom: 3rem;