Grid layout using Bootstrap 3.0

Question

I need to create a grid layout using Bootstrap 3.0 with white space between columns. I'm using a row and 4 cols with a width of 3. However, all of them appear together without any space in between. How could I do this?

Example:

<div class="row">
  <div class="col-lg-3" style="background-color: grey;">
    col1
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col2
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col3
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col4
  </div>
</div>

Answer 1

After a discussion with @ShaharGalukman, it seems that Bootstrap 3.0 does not support this feature natively. So, what I did is:

Create the grid using Bootstrap 3.0 syntax with all the columns together. Then, instead of setting the background color to the col divs, I created a new div inside each col that contains the background-color setting. This way you have the divisions between columns. You can adjust the white space with the margin of the new div. Setting a margin: -15px leaves no space between columns.

Hope this helps someone else!

<div class="row">
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col1
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col2
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col3
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col4
    </div>
  </div>
</div>

Answer 2

I have never used or heard of the boostrap class "col-lg-3". I use "spanX" where X is the number of columns in the 12-column grid.

<div class="row">
  <div class="span3" style="background-color: grey;">
    col1
  </div>
  <div class="span3" style="background-color: grey;">
    col2
  </div>
  <div class="span3" style="background-color: grey;">
    col3
  </div>
  <div class="span3" style="background-color: grey;">
    col4
  </div>
</div>