Bootstrap 3 grid with no gap

Question

I am trying to create a 2 column grid, with literally a 50% with no margins or padding.

How do I achieve this with Bootstrap 3 I tried this but end up with negative

Answer 1

The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 3 sizes. Tiny (for smartphones .col-), Small (for tablets .col-sm-) and Large (for laptops/desktops .col-lg-*). The 3 grid sizes enable you to control grid behavior on different devices (desktop, tablet, smartphone, etc..).

Unlike 2.x, Bootstrap 3 does not provide a fixed (pixel-based) grid. While a fixed-width layout can still be acheived using a simple custom wrapper, there is now only one percentage-based (fluid) grid. The .container and .row classes are now fluid by default, so don't use .row-fluid or .container-fluid anymore in your 3.x markup.

Source

Answer 2

I am sure there must be a way of doing this without writing my own CSS, its crazy I have to overwrite the margin and padding, all I wanted was a 2 column grid.

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

Answer 3

Use "clearfix" instead of "row". It does the exact same except it doesn't have a negative margin. Step through the "row" usage and you'll see that's the only difference.

Answer 4

You'd need to override the negative margins from the .row in large screens either directly or with a custom class

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Updated fiddle