bootstrapのグリッドシステムの間隔を変えたい

Question

bootstrapのグリッドシステムでcol-md-3クラスを4つ横並びにしているのですが、それぞれのcolクラスの間隔を広げたいのですが、やり方が分かりません。（colクラスの幅を縮める）
bootstrap@5.0.0になります。

bootstrapのドキュメントに
https://bootstrap-guide.com/layout/grid
grid-gutter-width: 30px !default;
というものを見つけたのですが、書いても効果ありませんでした。

<div class="row uriage-flow">
        <div class="col-md-3">
          <img src="img/1.jpg" alt="SEO対策" class="img-fluid">
          <h2>SEO対策</h2>
          <p>
            御社の商品やサービスをサイトで紹介するとともに、
            SEO対策をしていきます。売上アップのために、専門の
            スタッフがライティングやSEO施策を致します。
          </p>
          <a href="#">詳細を見る</a>
       </div>
       <div class="col-md-3">
        <img src="img/2.jpg" alt="SEO対策" class="img-fluid">
        <h2>広告運用</h2>
        <p>
          御社の商品やサービスを広告運用します。PPC広告や
          SNS広告など、それぞれの特性と御社の商品やサービス
        との相性を見て運用していきます。</S>
        </p>
        <a href="#">詳細を見る</a>
     </div>
     <div class="col-md-3">
      <img src="img/3.jpg" alt="SEO対策" class="img-fluid">
      <h2>LP作成</h2>
      <p>
        御社の商品やサービスのLPを作成します。マーケティング
        施策を行い、ターゲットを明確に設定し対象となる見込み客
        にアプローチしていきます。
      </p>
      <a href="#">詳細を見る</a>
   </div>
   <div class="col-md-3">
    <img src="img/4.png" alt="SEO対策" class="img-fluid">
    <h2>アフターフォロー</h2>
    <p>
      御社の商品やサービスの購入者に対して、アフタフォローを
      することで満足度アップをします。メルマガやラインなどを
      使いアプローチしていきます。
    </p>
    <a href="#">詳細を見る</a>
 </div>

.uriage-flow{
    grid-gutter-width: 30px !default;
}

.uriage-flow img{
    border-radius: 10px;
}

.uriage-flow h2{
    font-size:35px;
}

.uriage-flow a{
    color: black;
    font-weight: bold; 
}

Comments

[m.ts10806]

bootstrapのバージョンをマイナーバージョン含めて正確に提示願います。

[dobashi]

bootstrap@5.0.0になります。

[m.ts10806]

質問本文に追記してください。

[dobashi]

質問本文に追記させていただきました。

Answer 1

意図と違ったら申し訳ないのですが、colの間は下記で調整しているようです。

なので

.row {
    --bs-gutter-x: 2rem
}

のように直接ここの値をいじると広がりましたが、如何でしょうか。

ただ、これだとrowがついてると全てに影響するので、効果を限定的にするならこうですかね。

.row > .col-md-3{
    --bs-gutter-x: 2rem
}

Comments

[dobashi]

ありがとうございます。
--bs-gutter-x: 2rem
で間隔が広がりました。

感謝です。

[m.ts10806]

2は雑に入れた数値なので自身で調整してください。

[dobashi]

はい。ありがとうございます。