give space between columns

i dont know how to give spaces between columns, i tried to use gx-* but it doesnt work and it causes horizontal scroll which make it even worse, gap-* works but it misses with the layout and causes last column to break on a new row.

      <div className="row mb-4 px-5">

        <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
          ...
        </div>

        <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
          ...
        </div>

        <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
          ...
        </div>

        <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
         ...
      </div>

Move the classes: bgOrange p-4 d-flex align-items-center justify-content-between border from the .col container into its child <div>.

<div className="row mb-4 g-3">
  <div className="col-md-3 ">
    <div className="bgOrange p-4 d-flex align-items-center justify-content-between border">...</div>
  </div>

  <div className="col-md-3">
    <div class="bgOrange p-4 d-flex align-items-center justify-content-between border">...</div>
  </div>

  <div className="col-md-3">
    <div class="bgOrange p-4 d-flex align-items-center justify-content-between border">...</div>
  </div>

  <div className="col-md-3">
    <div class="bgOrange p-4 d-flex align-items-center justify-content-between border">...</div>
</div>

Demo @ StackBlitz

Reference: Horizontal & vertical gutters