How do I add spacing between columns in Bootstrap?

Question

I'm sure there is a simple solution to this problem. Basically, if I have two columns how can I add a space between them?

e.g. if the html is:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.

If I wanted a 100px space between the two how could I achieve this? Obviously automatically through bootstrap the div sizes would become 450px each to compensate for the space

Answer 1

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">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

This will automatically render some space between the 2 divs.