Remove spacing between cols

Question

I want to remove the space between multiple columns in the Bootstrap grid.

How can we overwrite Bootstrap\'s CSS to achieve this task or any other better solution wi

Answer 1

add a class when you need to remove spaces use it

.padding-0{
    padding-right:0;
    padding-left:0;
}

in html write this class

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

Answer 2

I would add a class to the row and target the column children with a descendant wildcard selector:

HTML:

<div class="row nopadding">
    <div class="col-md-2">
        //stuff here for this column
    </div>
    <div class="col-md-10">
        //stuff here for columns
    </div>
</div>

CSS:

.nopadding > div[class^="col-"] {
    padding-right: 0;
    padding-left: 0;
}

Answer 3

If you are using LESS you can use snippet and apply it to the row.

.no-gutter {
   [class*="col-"] {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
}

If normal CSS

.no-gutter > [class*="col-"]{
}

Like so:

<div class="row no-gutter">
  <div class="col-md-2">
   //stuff here for this column
  </div>
  <div class="col-md-10">
   //stuff here for columns
  </div>
</div>