Geek Answers Handbook

Removing left / right shims on col-md-6 bootstrap

I have a site using Bootstrap, but I want to redefine left and right padding with only col-md-6 columns (set them to 0px). Not sure how to do this, my current setup ...

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 col-md-6 sometimes gets a replacement (Wordpress loop) with the col-md-12 div, and I don't want .fix-gutters to be used in this case.

NOTE. I need the override to run at the same level as the col-md-6 command. Example

 <div class="col-md-6 overide-class">
+6
source share
3 answers

This will be for you: (will only make changes to elements inside the main div)

#main > .col-md-6{padding-right: 0; padding-left: 0;}

+4
source

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 that not what you mean?

+6
source

You can simply add a new class to what you already have, but specify it for col-md-6

See an example snippet in 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>
+2
source

More articles:


All Articles