How to remove the gutter (spacing) between columns in Bootstrap?

Question

How can I remove the 30px gutter between columns? But without setting margin-left:-30px?

<div class='container'>   <div class='row'>      <div class='col-lg-1'></div>     <div class='col-lg-1'></div>     <div class='col-lg-1'></div>    </div> </div> 

Answer 1

Update 2021

Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it on the .row where you want no spacing between columns.

Bootstrap 5 also has new gutter classes that are specifically designed to adjust the gutter for the entire row. The gutters classes can be used responsively for each breakpoint (ie: gx-sm-4)

• use g-0 for no gutters
• use g-(1-5) to adjust horizontal & vertical gutters via spacing units
• use gy-* to adjust vertical gutters
• use gx-* to adjust horizontal gutters

Bootstrap 4 now includes a .no-gutters class that you can just add to the .row.

<div class="row no-gutters">     <div class="col">x</div>     <div class="col">x</div>     <div class="col">x</div> </div> 

Bootstrap 4: http://codeply.com/go/OBW3RK1ErD

---

Bootstrap 3.4.0+ gutters are created using padding, but they added a .row-no-gutters class. See the documentation for Bootstrap 3.4 and look for 'Remove gutters'.

HTML you can use:

<div class="row row-no-gutters">     <div class="col">x</div>     <div class="col">x</div>     <div class="col">x</div> </div> 

Bootstrap 3+, <= 3.3.9 gutters are created using padding. You also must adjust the negative margin so that spacing around the outer columns is not affected.

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

Just add the no-gutter class to the .row.

Demo: http://bootply.com/107458

Answer 2

A better way to remove padding on the columns would be to add a .no-pad class to your .row:

 <div class="row no-pad"> 

...and then add this CSS.

.row.no-pad {   margin-right:0;   margin-left:0; } .row.no-pad > [class*='col-'] {   padding-right:0;   padding-left:0; } 

It's a bad idea to look for first- and last-child items as actually the .row is meant to take care of those offsets at the viewport's right and left. With the above method all .col-*s remain identically styled, which is also much simpler when considering responsiveness, especially stacking at mobile sizes (try my demo below md size).

The direct-descendant CSS selector > means that the .no-pad will only be applied to that .row's immediate child .cols, so you can have padding on subsequently nested column structures (or not) if you wish.

Also using the attribute selector [class*='col-'] means that each column needs no extra non-Bootstrap classes added.

Here is a demo: http://www.bootply.com/Ae3xTyAW5D