I've been exploring ways to incorporate spacing between my columns in Bootstrap 5. I diligently followed the guidelines provided in the documentation, but I'm facing difficulties in adding gutters between my columns.
Currently, I am utilizing g-3 to introduce gutters to my row. As per the instructions, this should create spacing between both rows and columns. However, upon experimenting with gap-3, the third column unexpectedly shifts to the subsequent row.
I seem to be missing something crucial here. Any insights on what might be causing this issue?
<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>