css - 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 margins at tablet/desktop break points:

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 offset-0">Col 1</div>
        <div class="col-sm-6 offset-0">Col 2</div>
    </div>
</diV>

CSS

.container {
    background: green;
    overflow: hidden;
}
.row > * {
    background: blue;
    color: #fff;
}
.row :first-child {
    background: red;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}

DEMO - http://jsfiddle.net/pjBzY/

Answer 1

Another option would be to create your own special CSS class for whenever you want to apply the "gutterless" columns..

HTML

<div class="container">
    <div class="row no-gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS

.no-gutter [class*="-6"] {
    padding-left:0;
}

Demo: http://bootply.com/73960