How to add spacing between columns?

Question

I have two columns:

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

How can I add a space between them?

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 automatically with Bootstrap: the divs sizes would become 450px each to compensate for the spacing.

Answer 1

You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

In Bootstrap 4 use: offset-2 or offset-md-2