how to give space between bootstrap columns

Question

am using bootstrap 5 , am creating 6 column in a row where i have used gutter in row, but gutter is not applying on it, i am not able to see space between columns. can anyone guide me what am doing wrong here? following is my code

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box;
}
.myrow{
    background-color: red;
}
<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2">1</div>
        <div class="box col-lg-2">2</div>
        <div class="box col-lg-2">3</div>
        <div class="box col-lg-2">4</div>
        <div class="box col-lg-2">5</div>
        <div class="box col-lg-2">6</div>
        
     </div>

 </div>

What do u want to achive exactly? I mean, each row is separated correctly with enough spaces. [Here](https://codepen.io/Szabii97/pen/oNWqOZd) is a link for your example. — Nagy Szabolcs, Jul 29 '21 at 15:05
@NagySzabolcs actually am trying to fit image in column and then give space between all columns so my images looks separate — BabyCoder, Jul 29 '21 at 15:16

Quinn Keaveney · Answer 1 · 2021-07-29T15:15:42.303

2

Using your code, I've found that the gutters are working as intended. Maybe you aren't seeing this because you are applying the background color to the columns, not the column containers. See below for more. https://codepen.io/QuiteQuinn/pen/JjNLVbO

.box{
    height: 100px;
    background-color: blue;
}
.myrow{
    background-color: red;
}
span{
    width: 100%;
    background: yellow;
    display: inline-block;
}


<div class="container">
  <div class="row myrow gx-5">
    <div class="box col-lg-2"> <span>1</span></div>
    <div class="box col-lg-2"> <span>2</span></div>
    <div class="box col-lg-2"> <span>3</span></div>
    <div class="box col-lg-2"> <span>4</span></div>
    <div class="box col-lg-2"> <span>5</span></div>
    <div class="box col-lg-2"> <span>6</span></div>
  </div>
</div>

edited Jul 29 '21 at 15:15

answered Jul 29 '21 at 15:06

Quinn Keaveney

1,248
1
17
39

gutters are not for spacing between columns ? i means space between column 1 and column 2 not space between their content ? – BabyCoder Jul 29 '21 at 15:11
Thats the way gutters work in Bootstrap – Paulie_D Jul 29 '21 at 15:12
To clarify, gutters are for the space between columns, but this space is created with padding and padding is included in the background of an element. This means that when you apply a blue background to the background of an element with padding.. the padding will also show as blue. – Quinn Keaveney Jul 29 '21 at 15:13
@QuinnKeaveney so is there anyway to create space between columns and padding 0 inside its column ? actually am trying to fit image in column and then give space between all columns so my images looks separate – BabyCoder Jul 29 '21 at 15:16
If you place images in the column then that intended effect should work. See here. https://codepen.io/QuiteQuinn/pen/JjNLVbO – Quinn Keaveney Jul 29 '21 at 15:42
The scenario where that wouldn't work would be if you are placing images as backgrounds... if that's the case place them within a div inside of the column. – Quinn Keaveney Jul 29 '21 at 15:44

score 1 · Accepted Answer · answered Jul 29 '21 at 15:25

If I understand correctly, you want images in columns but make some space between the columns so pictures won't collide.

If you don't want to use paddings, you can always use margins. In bootstrap, you can give ml-1, ml-2 classes (until 5) which can make margins for you.

ml -> margin-left

mr -> margin-right

Here is a simple example based on your code, I hope it helps!

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box; 
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
.myrow{
    background-color: red;
}

img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  
}

<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        
     </div>

 </div>

how to give space between bootstrap columns

2 Answers2