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?

You can refer to my answer on a similar question. Hope this helps. http://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/29576362#29576362 — Utpal - Ur Best Pal, Dec 14 '15 at 11:38

Carol Skelly · Accepted Answer · 2013-08-15T12:09:27.360

11

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.

edited Aug 15 '13 at 12:09

answered Aug 15 '13 at 11:28

Carol Skelly

351,302
90
710
624

5

Thanks for reply. Using a container is better solution. – Ali Emre Çakmakoğlu Aug 15 '13 at 12:00

Karl Adler · Answer 2 · 2014-05-09T13:08:49.897

5

for more exact column width you may use the css3 calc() operator

.col-lg-4 {
    margin-left:15px;
    width:31.6%; /* non-css3 fallback */
    width: calc( 33.33333333% - 15px ); /* css3 calculation */
}

edited May 09 '14 at 13:08

answered May 09 '14 at 12:12

Karl Adler

15,780
10
70
88

score 2 · Answer 3 · answered Sep 10 '14 at 04:36

2

You need to contain that row into a .container DIV. Otherwise Bootstrap understands there should be no gaps in between columns.

answered Sep 10 '14 at 04:36

Julián Abal

45
7

score 1 · Answer 4 · edited May 23 '17 at 11:50

I posted this here already but it is still relevant to the original question and provides more information about how this approach works.

I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.

I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.

This was the end result we were going for

Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.

this is the markup for the two columns

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column

This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.

The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.

Hope this helps

How to deal with Bootstrap 3 columns have no gap?

4 Answers4