Bootstrap: Add Margin/padding Space Between Columns

Answer :

Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.

<div class="row">     <div class="text-center col-md-6">         <div class="classWithPad">Widget 1</div>     </div>     <div class="text-center col-md-6">         <div class="classWithPad">Widget 2</div>     </div> </div> 

CSS

.classWithPad { margin:10px; padding:10px; } 

Update 2018

Bootstrap 4 now has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.

<div class="row">     <div class="text-center col-md-6">         <div class="mr-2">Widget 1</div>     </div>     <div class="text-center col-md-6">         <div class="ml-2">Widget 2</div>     </div> </div> 

You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...

Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...

Bootstrap 4 Column Spacing Demo

Notes

• Changing the left/right margin(s) on col-* will break the grid.
• Change the left/right margin(s) on the content of col-* works.
• Change the left/right padding on the col-* also works.

I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:

<div class="row">   <div class="col-md-6">     <div class="col-md-12">      Set room heater temperature    </div>  </div>  <div class="col-md-6">    <div class="col-md-12">      Set room heater temperature    </div>  </div> </div> 

This will automatically render some space between the 2 divs.