How do I accomplish following design using bootstrap 3.2.0?

Question

I need to design something the first one in the picture below, there should not be left or right padding.

What I really want to do is:

• Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
• Content inside those columns must be in normal paddings and margins.
• There must be no space / gutter between cols.
• It must be follow bootstrap's breaking points.

Answer 1

You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).

Example:

<div class="container"> //change this to container-fluid if you want full screen width 
  <div class="row">
    <div class="col-xs-4 left">
    </div>
    <div class="col-xs-8 right">
    </div>
  </div>
</div>

JS Fiddle Demo

Answer 2

Create a nopadding class like this one:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

If you add that class to your column divs there will be no padding on them.