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>