Add gutters between columns in Bootstrap 5

I am trying to add gutters between my columns in Bootstrap 5. I followed the documentation as to how to implement it but for some reason I cannot add gutters between my columns.

I'm using g-3 to add gutters to my row and per the documentation this should add gutters in between my rows and columns. I've tried using gap-3 but then it moves the 3rd column to the next row.

What am I missing here?

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


<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 text-center g-3">
    <div class="col-12">
      <h1>Services</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img class="rounded-circle" src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="alt text">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
  </div>
</div>

Solution

So this issue was that I had to create another div inside my col div which should have the classes of bg-white border rounded p-3 and it should not be inside the col div.

check the code down below.

I replaced this

<div class="col bg-white border rounded p-3">
     <img class="rounded-circle" src="#" alt="#">
     <h4>Title Here</h4>
     <p>Some more info here</p>
</div>

With this

<div class="col">
    <div class="bg-white border p-3">
         <img src="#" alt="alt text">
         <h4>Title Here</h4>
          <p>Some more info here</p>
    </div>
</div>