※※【レイアウト雛形】スペースクラス※※

マージン、パディングはすべて以下のクラスでコントロール可能です。

{property}{sides}-{size}

{property}(マージン、パディングの別)
m p
マージン パディング


{sides}(マージン、パディングの方向)
t b l r


{size}(マージン、パディングの大きさ)
1 2 3 4 5
0.25rem 0.5rem 1rem 1.5rem 3rem

使用例

上マージン0.25rem 下マージン0.25rem 左マージン0.25rem 右マージン0.25rem
class=”mt-1″ class=”mb-1″ class=”ml-1″ class=”mr-1″


上パディング0.25rem 下パディング0.25rem 左パディング0.25rem 右パディング0.25rem
class=”pt-1″ class=”pb-1″ class=”pl-1″ class=”pr-1″
ブレークポイントを追加することでレスポンシブに対応。

{property}{sides}-{breakpoint}-{size}

{breakpoint}(ウインドウサイズ)
md lg xl
720px以上 960px以上 1140px以上

使用例

上マージン3rem(スマホのみ) 上マージン3rem(PCのみ) 下マージン3rem(スマホのみ) 下マージン3rem(PCのみ)
class=”mt-3 mt-md-0″ class=”mt-md-3″ class=”mb-3 mb-md-0″ class=”mb-md-3″


上パディング3rem(スマホのみ) 上パディング3rem(PCのみ) 下パディング3rem(スマホのみ) 下パディング3rem(PCのみ)
class=”pt-3 pt-md-0″ class=”pt-md-3″ class=”pb-3 pb-md-0″ class=”pb-md-3″