title: removing left/right padding on col-md-6 Bootstrap
body: <p>I have a site utilizing Bootstrap but I want to override the left and right padding on just the columns col-md-6 (set them to 0px). Not sure how to do it, my current set up is ...</p>
  
  <p>css</p>
  
  <pre><code>.fix-gutters &gt; [class^="col-"],
  .fix-gutters &gt; [class*=" col-"] {
    padding-right: 0px;
    padding-left: 0px;
  }
  </code></pre>
  
  <p>and applying it to </p>
  
  <pre><code>&lt;div id="main" class="row fix-gutters"&gt;
  
      .... &lt;div class="col-md-6"&gt; ... etc.
  </code></pre>
  
  <p>but that col-md-6 sometimes gets replaced (Wordpress loop) with a col-md-12 div and I don't want .fix-gutters to apply if that's the case.</p>
  
  <p>NOTE: i need the override to happen on the same level as the col-md-6 command. example</p>
  
  <pre><code>&lt;div class="col-md-6 overide-class"&gt;
  </code></pre>