スペーシング

CSS Grid layout moduleを使用している場合は the gap utility の使用を検討してください。

xs から xxl までのすべてのブレークポイントに適用されるスペーシングユーティリティには、ブレークポイントの略語が含まれていません。

これらのクラスは min-width: 0 以降に適用されるため、メディアクエリに縛られないからです。しかし、残りのブレークポイントにはブレークポイントの略語が含まれています。

クラスは，xs の場合は {property}={sides}-{size} という形式で sm、md、lg、xl、xxl の場合は {property}={sides}-{breakpoint}-{size} という形式になります。

Bootstrapには、ブロックレベルのコンテンツ、つまり display: block と width が設定されているコンテンツを、水平方向の余白を auto に設定することで水平方向にセンタリングするための margin="x-auto" 属性を用意しています。

<template>
 <b-div
  margin="x-auto"
  padding="2"
  style="width: 200px"
 >
  Centered element
 </b-div>
</template>

display：gridを使用する場合、親 Grid コンテナで gap utilities を利用できます。 これにより、個々のグリッドアイテム（ display：grid コンテナの子）に margin utilities を追加する手間を省くことができます。 gap utilities はデフォルトでレスポンシブであり, $spacers Sassマップに基づいて utilities API を介して生成されます。

<template>
 <b-div
  display="grid"
  :gap="3"
 >
  <b-div padding="2">
   Grid item 1
  </b-div>
  <b-div padding="2">
   Grid item 2
  </b-div>
  <b-div padding="2">
   Grid item 3
  </b-div>
 </b-div>
</template>

サポートには、Bootstrapのすべての Grid ブレークポイント に対するレスポンシブオプションと, $spacers マップからの6つのサイズ(0–5）が含まれます。 gap=auto utility クラスは実質的に gap=0と同じであるため、存在しません。