Add gutters between columns in Bootstrap 5-CodePudding

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?

<div >
        <div >
            <div >
                <h1>Services</h1>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div >
                <img  src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div >
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div >
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div >
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div >
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div >
                <img src="#" alt="alt text">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
        </div>
</div>

CodePudding user response：

Your first column is taking the entire row - all 12 columns. If you change the first column to <div class=“col”> does it give what you want?

CodePudding user response：

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 >
     <img  src="#" alt="#">
     <h4>Title Here</h4>
     <p>Some more info here</p>
</div>

With this

<div >
    <div >
         <img src="#" alt="alt text">
         <h4>Title Here</h4>
          <p>Some more info here</p>
    </div>
</div>