Bootstrap4のSpacing

3491 ワード
spacing bootstrap4 padding margin margin テキストリンク

Spacing

property

m - margin
p - padding

sides

Bootstrap5をちょっとだけ

Bootstrap4 Bootstrap5
t top t top
b bottom b bottom
l left s start
r right e end
x left & right x left & right
y top & bottom y top & bottom

size

※$spacer=1rem=16px。$spacers Sassマップ変数にエントリを追加することで, サイズの追加可能

0 1 2 3 4 5
$spacer× 0 $spacer× .25 $spacer× .5 $spacer $spacer × 1.5 $spacer × 3

auto - for classes that set the margin to auto
marginの場合、数字の前に n をつけるとマイナスに　例）mt-n1

ブレークポイント

xs sm md lg xl
Extra small Small Medium Large Extra large
<576px ≥576px ≥768px ≥992px ≥1200px

記載方法

<div class="ml-1">左に（16px × 0.25）のmargin</div>
<div class="px-md-5">幅768px以上の時は　左右に（16px × ３）のpadding</div>