How to deal with Bootstrap 3 columns have no gap?

Question

I am in trouble with new Bootstrap 3 grid system. I would like to create 4 columns grid. So here's my code:

<div class="row">
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
</div>

My problem is there's no gap among the columns. Grid applies padding-left and padding-right to columns instead of margin-left and margin-right.

When I remove padding and add margin, It collapses. How am I gonna fix this? or Is there something that I couldn't undestand?

Answer 1

If you can't use the default padding to create gaps, you'd have to add `margin-left' to the appropriate columns and also tweak the % width.

For example .col-lg-4 usually has 33% width, so you'd decrease it a little..

.col-lg-4 {
    margin-left:15px;
    width:31.6%;
}

http://bootply.com/74374

Another option would be to use a container inside the columns, and then the padding will work to create the gaps.