Adding margins between Bootstrap columns

I have columns in Bootstrap 5 something like the following.

<div class="row">
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 1</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 2</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 3</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 4</p>
    </div>
</div>

With a border, I can see that there is no spacing between columns. So I changed the top-level <div> to have class="row gap-3".

This correctly gives me a space between each column. However, it also causes the 4th column to wrap.

Is there any way to put a space between each column but not change the number of columns per row?

Don't add borders to the columns themselves. Create an element within the column and style this one instead. This way, everything will look just right, at any breakpoint.

You can easily change the width of the gutter with gx-* helper classes on the row element. See https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal-gutters

Note that if you are using larger gutters (.gx-5), the docs states that

The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.

and

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class.

What that means is that horizontal scrollbars may appear at certain window sizes if you don't apply one of these solutions. I would choose the overflow-hidden solution as it doesn't change the main container padding.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container-fluid overflow-hidden">

  <!-- Smaller gutter -->
  
  <h3>Smaller gutter</h3>

  <div class="row gx-3 text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
  
  <!-- Default gutter -->
  
  <h3>Default gutter</h3>

  <div class="row text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
  
  <!-- Larger gutter -->
  
  <h3>Larger gutter</h3>

  <div class="row gx-5 text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
</div>