Remove gutter space for a specific div only

Question

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here.

I want to remove the gutter space for a specific div, so that there will be no gutter space in the row. Each span will be next to each other with no gutter.

The problem is if I remove the margin 30px (gutter) it leaves 360px (12 * 30px) at the end of the row.

Given that I want to remove gutter space for a specific div only. Let's assume that it's for divs which are in the main_content div.

div#main_content div{   /*  no gutter for the divs in main_content  */ } 

How can I remove the gutter for a specific div without loosing Bootstrap responsiveness and not leaving space at the end of the row?

Answer 1

Bootstrap 5 (update 2021)

Bootstrap 5 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 (no extra CSS needed)

Bootstrap 4 includes a no-gutters class that can be applied to the entire row:

http://codeply.com/go/pVsGQZVVtG

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

There are also new spacing utils that enable control of padding/margins. So this can be used to change the padding (gutter) for a single column (ie: <div class="col-3 pl-0"></div>) sets padding-left:0; on the column, or use px-0 to remove both the left and right padding (x-axis).

Bootstrap 3 (original answer)

For Bootstrap 3, it's much easier. Bootstrap 3 now uses padding instead of margins to create the "gutter".

.row.no-gutter {   margin-left: 0;   margin-right: 0; }  .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) {   padding-right: 0;   padding-left: 0; } 

Then just add no-gutter to any rows where spacing is to be removed:

  <div class="row no-gutter">     <div class="col-lg-1"><div>1</div></div>     <div class="col-lg-1"><div>1</div></div>     <div class="col-lg-1"><div>1</div></div>   </div> 

Demo: http://bootply.com/107708

Answer 2

For Bootstrap 3.0 or higher, see this answer

We're only looking at class .span1 here (one column on a 12 wide grid), but you can achieve what you want by removing the left margin from:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive 

Then changing .row-fluid .span1's width to equal to 100% divided by 12 columns (8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive 

You may want to do this by adding an additional class that would allow you to leave the base grid system intact:

.row-fluid [class*="NoGutter"] { margin-left:0 } .row-fluid .span1NoGutter { width: 8.33334% }  <div class="row-fluid show-grid">     <div class="span1NoGutter">1</div> </div> 

You could repeat this pattern for all other columns, as well:

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col .row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col .row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col or .row-fluid .span4NoGutter { width:25% } .row-fluid [class*="NoGutter"] { margin-left:0 } 

* EDIT (insisting on using the default grid)
If the default grid system is a requirement, it defaults to a width of 940px (the .container and .span12 classes, that is); thus, in simplest terms, you'd want to divide 940 by 12. That equates to 12 containers 78.33333px wide.

So line 339 of bootstrap.css could be edited like so:

.span1 { width:78.33333px; margin-left:0 }   or .span1 { width:8.33334%; margin-left:0 } // this should render at 78.333396px (78.333396 x 12 = 940.000752)