Bootstrap: add margin/padding space between columns

Question

I\'m trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I\'ve tried this but I don\'t like the result. Here is my code:

Answer 1

Super easy with flexbox. Leave room for some space by changing the columns to col-md-5

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

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}

Answer 2

I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it. Something like:

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
 </div>
</div>

Answer 3

In the otherside if you like to remove double padding between columns just add class "nogap" inside row

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

and create additional css class for it

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

Thats it, check here: https://codepen.io/michal-lukasik/pen/xXvoYJ

Answer 4

Try this:

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>

Answer 5

Try This:

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

Answer 6

For the more curious, I have also found that adding

border: 5px solid white

or any other variant of your liking, to make it blend in, works superbly.