html css layout bootstrap-5 bootstrap-grid

How to add a gap between column without moving to another row in bootstrap 5?

I'm working on a testimonial section that has a structure like this :

<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">
    <div class="row"> (row of the testimonial card)
        <div class="col"> (content/testimonial card)
        <div class="col"> (content/testimonial card)
    </div>
</div>

there are more row and column inside of each column (testimonial card) for layout purpose

The problem is when i try to add a gap on "row of the testimonial card" the testimonial card would stack into 1 columns instead of 2 (what it supposed to be) even if the gap is the lowest

first i tried using row-cols-2 and it doesn't work
second i tried to decrease both of the card's size by adding : w-50 & col-6 (and lower) and still doesn't work
the last step is i tried removing the "container" class that holds the row and column (cards) and then again, still doesn't work

What it should look like :

The result :

Solution

You can add gutters between the columns and rows as per your requirement.

But, when you add gutter between the columns you need to apply the border to child element of .col element otherwise they will appear as adjacent.

Hope this helps.

eg:

<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 overflow-hidden text-center d-flex ustify-content-between">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
  </div>
</div>

<hr class="my-5" />

<div class="container">
  <div class="row g-2"> <!--(row of the testimonial card)-->
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
  </div>
</div>