📘

ブートストラップの隙間（余白）の設定まとめ

に公開
Bootstrap
tech

ブートストラップでは、隙間（余白）の設定に関するクラスが複数あります。主にマージンとパディングを調整するためのクラスが提供されています。以下にまとめます。

1. マージン (Margin)

外側の余白を設定します。
クラス名のプレフィックスは m です。

基本構文

m{方向}-{サイズ}

  • {方向}: t (top), b (bottom), s (start), e (end), x (左右), y (上下), 空白 (全方向)
  • {サイズ}: 0, 1, 2, 3, 4, 5, auto
サイズ値 間隔 (px)
0 0px
1 4px
2 8px
3 16px
4 24px
5 48px
auto 自動調整

例

  • m-0 : 全方向のマージンを0
  • mt-3: 上側のマージンを16px
  • mb-4: 下側のマージンを24px
  • mx-2: 左右のマージンを8px
  • my-1: 上下のマージンを4px
  • ms-auto: 左側のマージンを自動調整 (右寄せに役立つ)

2. パディング (Padding)

内側の余白を設定します。
クラス名のプレフィックスは p です。

基本構文

p{方向}-{サイズ}

  • {方向}: t (top), b (bottom), s (start), e (end), x (左右), y (上下), 空白 (全方向)
  • {サイズ}: 0, 1, 2, 3, 4, 5

例

  • p-0 : 全方向のパディングを0
  • pt-3: 上側のパディングを16px
  • pb-4: 下側のパディングを24px
  • px-2: 左右のパディングを8px
  • py-1: 上下のパディングを4px

3. ギャップ (Gap)

FlexboxやGridコンテナの子要素間の隙間を設定する場合に使います。
クラス名のプレフィックスは gap です。

基本構文

gap-{サイズ}

  • {サイズ}: 0, 1, 2, 3, 4, 5

例

  • gap-0 : 要素間の隙間を0
  • gap-3 : 要素間の隙間を16px
  • gap-4 : 要素間の隙間を24px

4. レスポンシブ対応

隙間の設定はレスポンシブに対応しています。ブレークポイントを指定することで、画面サイズごとに余白を調整できます。

基本構文

{ブレークポイント}-{m or p}{方向}-{サイズ}

ブレークポイント

キーワード 画面幅
sm 576px以上
md 768px以上
lg 992px以上
xl 1200px以上
xxl 1400px以上

例

  • mb-md-4: 中サイズ (768px以上) の画面で下側マージンを24px
  • px-lg-3: 大サイズ (992px以上) の画面で左右パディングを16px

5. ユーティリティのリセット

不要な隙間を無効にする場合、以下のクラスを使います。

  • m-0: マージンをすべて0にリセット
  • p-0: パディングをすべて0にリセット

これらのクラスを組み合わせることで、ブートストラップのレイアウトに柔軟な隙間設定が可能になります。

Discussion