Ufdjrw

So when reading about controlling the number of columns in a DIV I must ensure the number of columns adds up to 12. In the following example I want two columns so I specify each DIV has having col-6. This works correctly, but when I add any type of margin such as m-2, it stacks each DIV on top of each other when there is obviously room on the row.

I'm a newb to bootstrap so can anyone tell what I'm doing wrong? I was expecting two columns with each column having two DIV sections. I just want the equivalent of cell spacing between however many DIV section are listed under the DIV row.

 <div class="row">
 <div class="col-6 m-2 p-2">
 <h4>Div 1</h4>
 </div>
 <div class="col-6 m-2 p-2">
 <h4>Div 2</h4>
 </div>
 <div class="col-6 m-2 p-2">
 <h4>Div 3</h4>
 </div>
 <div class="col-6 m-2 p-2">
 <h4>Div 4</h4>
 </div>
 </div>

Update: It seems as though you should not specify the number of column you want in the same DIV tag as where you specify the spacing.

<div class="row">
 <div class="col-6">
 <div class="m-2 p-2"><h4>Div 1</h4></div>
 </div>
 <div class="col-6">
 <div class="m-2 p-2"><h4>Div 2</h4></div>
 </div>
 <div class="col-6">
 <div class="m-2 p-2"><h4>Div 3</h4></div>
 </div>
 <div class="col-6">
 <div class="m-2 p-2"><h4>Div 4</h4></div> 
 </div>
</div>

col and row have margin and padding.

If you add more of them it will break the flow. You should add your margins/paddings into your div inside the col, not at the same level of the col.

Please find attached a short snippet of what i'm trying to explain :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 <div class="col-6" style="background:green;">
 <h2 class="text-center">col A</h2>
 <div class="row">
 <div class="col-6">
 <div class="m-2 p-2" style="background:red;">col AA</div>
 </div>
 <div class="col-6">
 <div class="m-2 p-2" style="background:yellow;">col AB</div>
 </div>
 </div>
 </div>
 <div class="col-6" style="background:blue;">
 <h2 class="text-center">col B</h2>
 <div class="row">
 <div class="col-6">
 <div class="m-2 p-2" style="background:cyan;">col BA</div>
 </div>
 <div class="col-6">
 <div class="m-2 p-2" style="background:orange;">col BB</div>
 </div>
 </div>
 </div>
 </div>
</div>