removing left/right padding on col-md-6 Bootstrap

Question

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

css

.fix-gutters > [class^="col-"],
.fix-gutters > [class*=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

and applying it to

<div id="main" class="row fix-gutters">

    .... <div class="col-md-6"> ... etc.

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.

NOTE: i need the override to happen on the same level as the col-md-6 command. example

<div class="col-md-6 overide-class">

Answer 1

If you want to add another class, just add a class called no-padding.

Then, in your CSS, add:

.no-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

Or is this not what you mean?