Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove gutter space for a specific div only

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.

enter image description 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?

like image 294
Techie Avatar asked May 10 '13 19:05

Techie


People also ask

How do I remove the gutter space in css?

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).

How do I remove the width of a gutter in bootstrap?

By default, Bootstrap 4 has class=”no-gutters” to remove gutter spaces of any specific div. The following image shows the highlighted gutter space and space between columns on bootstrap 4 12 column grid system. You can even modify gutter width by reducing 15px width of gutter space between each columns.

How can I remove space between two div tags in bootstrap?

You can add new class to your div elements and remove padding/margin with css. To make it more clear, bootstrap assigns margin-left: -15px and margin-right: -15px for . row selector and padding-left: 15px and padding-right: 15px on all . col-* selectors to get 30px space between all the cols.


2 Answers

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

like image 103
Zim Avatar answered Sep 22 '22 06:09

Zim


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) 
like image 42
Dawson Avatar answered Sep 18 '22 06:09

Dawson