Add gutters between columns in Bootstrap 5

user_8217204 0
Viewed 66

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 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>
bootstrap-5 twitter-bootstrap css html
2 Answers

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>
user_82172040

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?

user_179984580
Related