How to Remove Excess Padding in Bootstrap 3 Columns?

Removing Padding from Bootstrap 3 Columns

Problem:

In Bootstrap 3, there is excessive padding or margin on the right and left sides of col-md-* classes. The goal is to remove this extra space.

HTML Code:

<div class="col-md-12">
    <h2>OntoExplorer.<span><p><strong>Desired Output:</strong></p>
<p>Remove the extra padding or margin on the sides of the two columns without disabling the col-md-* class.</p>
<p><strong>Solution:</strong></p>
<p>Typically, .row is used to wrap columns instead of .col-md-12. .Row does not have the additional margins and padding that .col-md-12 has and also eliminates the space that a column would introduce with negative left and right margins.</p>
<p><strong>Updated HTML Code:</strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
    <div class="row">
        <h2>OntoExplorer.<span><p><strong>Custom CSS:</strong></p>
<p>To eliminate the padding or margins entirely, a custom CSS class called .nopadding can be added to remove these properties:</p>
<pre class="brush:php;toolbar:false">.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}