removing left/right padding on col-md-6 Bootstrap
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?
This will target them for you: (will only make the change to elements inside the main div)
#main > .col-md-6{padding-right: 0; padding-left: 0;}
You can simply add an new class to what you are allready but specify it for col-md-6
See example Snippet at FullPage.
.fix-gutters > [class*="col-"],
.fix-gutters-six > [class*="col-md-6"] {
padding-right: 0;
padding-left: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<h2>
Removed Padding only from Medium 6 Columns
</h2>
<div class="row fix-gutters-six">
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding on 6 Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding on 6 Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Default 12 Columns
</div>
</div>
</div>
<div class="row">
<h2>
Default Columns
</h2>
<div class="col-md-6">
<div class="alert alert-info">
Default 6 Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Default 6 Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Default 12 Columns
</div>
</div>
</div>
<div class="row fix-gutters">
<h2>
Removed Padding from All Columns
</h2>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding from all Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding from all Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Removed Padding from all Columns
</div>
</div>
</div>
</div>