How to deal with Bootstrap 3 columns have no gap?

twitter-bootstrap grid multiple-columns twitter-bootstrap-3

Ali Emre Çakmakoğlu · Aug 15, 2013 · Viewed 19.4k times · Source

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

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%;
}

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