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

Question

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

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

Please provide a proper minimal reproducible example of the issue. — C3roe
– C3roe, Commented Feb 18 at 8:22
Did you read the documentation? getbootstrap.com/docs/5.0/utilities/spacing — VDWWD
– VDWWD, Commented Feb 18 at 8:36
You can set the padding of a column without affecting the placement of a column. — KIKO Software
– KIKO Software, Commented Feb 18 at 9:03

Naeem Akhtar · Accepted Answer · 2025-02-19 00:23:16Z

1

Add gutters between columns and see if it helps.

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

Checkout the documentation: Bootstrap Horizontal Gutters

edited Feb 19 at 0:23

Naeem Akhtar

1,6211 gold badge16 silver badges24 bronze badges

answered Feb 18 at 9:33

Subhrajeet Swain

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Naeem Akhtar · Accepted Answer · 2025-02-18 10:52:13Z

0

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/[email protected]/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>

answered Feb 18 at 10:52

Naeem Akhtar

1,6211 gold badge16 silver badges24 bronze badges

1 Comment

Xyla Feb 19 at 6:07

Hey it actually works so the problem is that i added border, shadow, and stuff on the column container instead of wrapping the content to another container. Thanks for the help!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related