How to deal with Bootstrap 3 columns have no gap?
grid, multiple-columns, twitter-bootstrap, twitter-bootstrap-3
Solution
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.
Problem
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?