Remove padding from columns in Bootstrap 3

Question

Problem:

Remove padding/margin to the right and left of col-md-* in Bootstrap 3.

HTML code:

<div class="col-md-12">     <h2>OntoExplorer<span style="color:#b92429">.</span></h2>      <div class="col-md-4">         <div class="widget">             <div class="widget-header">                 <h3>Dimensions</h3>             </div>              <div class="widget-content" id="">                 <div id='jqxWidget'>                     <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>                     <div style="clear:both;" id="listBoxB"></div>                  </div>             </div>         </div>     </div>      <div class="col-md-8">         <div class="widget">             <div class="widget-header">                 <h3>Results</h3>             </div>              <div class="widget-content">                 <div id="map_canvas" style="height: 362px;"></div>             </div>         </div>     </div>  </div> 

Desired output:

Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?

Notice:

If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.

Answer 1

You'd normally use .row to wrap two columns, not .col-md-12 - that's a column encasing another column. Afterall, .row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins.

<div class="container">     <div class="row">         <h2>OntoExplorer<span style="color:#b92429">.</span></h2>          <div class="col-md-4 nopadding">             <div class="widget">                 <div class="widget-header">                     <h3>Dimensions</h3>                 </div>                 <div class="widget-content">                 </div>             </div>         </div>          <div class="col-md-8 nopadding">             <div class="widget">                 <div class="widget-header">                     <h3>Results</h3>                 </div>                 <div class="widget-content">                 </div>             </div>         </div>     </div> </div> 

if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.

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