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