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 can 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>

But, if you really want 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;

}