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>

Ovular

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

Swayder

Its good but its not working, maybe the order stylesheet is not ok. I have boostrap.css before the stylesheet where put I your solution. Its right? – Ovular

Yes, that should work. Did you also put the special col class in your HTML markup? – Swayder

Do you understand the solution? The CSS is using '.col', so that you'd apply this to any columns for which you want the gutter removed. This way you can use it for cols other that col-lg-1 – Swayder

yes, I understand very well, its found.. Great job, thank you. Do you know some modern best practice source for develop theme bootstrap? thank you for answer. – Ovular

but that's for ALL resolutions, right? you can't just have mobile version without gutters? :/ – Alyose

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

Oram

Answer 3

Instead of applying fixes that are difficult to maintain, I suggest generating your own customized version of Bootstrap from the Customizer where you can set the gutter to size you want (or remove it totally, by setting it to 0).

Basilio

This isn't the greatest idea. What if there are some areas you want gutters, but other areas you do not? – Bots

You could use bootstrap mixins to generate another set of columns with or without the columns, or create your own simple ones manually – Basilio

Answer 4

Bootstrap 3 introduced the .row-no-gutters class in v3.4.0, which works exactly as advertised.

To remove the gutters from a row and its columns, just add this class to the <div>.

Interfluent

Answer 5

Change button link style.

<... class="bth btn-link noMarginPaddingBorder" ...>

.noMarginPaddingBorder{
    margin:0 !important; 
    padding:0 !important;
    border: 0 !important;
}

Agnate