gx-5

bootstrap5.css

bootstrap5.css
.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

html bootstrap5 Sample

水平方向のカラム間のガター:gx-5


p-3 border bg-light
p-3 border bg-light
  <!-- ガターとは、カラム間のパディング、padding によって作られるカラムの隙間のことです。 -->
  <!-- 各カラムに padding-right と padding-leftを設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。。 -->
  <!--不要なオーバーフローを避けるため .container や.container-fluid を親要素に設定することもできます。たとえば、次の例では .px-4 でパディングを増やしています  -->
  <div class="container px-4">
    <div class="row gx-5">
      <div class="col">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
    </div>
  </div>