Remove gutter space for a specific div only

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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)

Solution 3 - Css

Update : link for TWBS 3 getbootstrap.com/customize/#grid-system

Twitter Bootstrap offers a customize form to download all or some components with custom configuration.

You can use this form to download a grid without gutters, and it will be responsive - you only need the grid component and the responsive ones concerning the width.

Demo (jsfiddle) custom grid

If you know a little about LESS, then you can include the generated CSS in a selector of your choice.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

If not, you should add this selector in front of each rule (not that much anyway).

If you know LESS and use the LESS scripts to manage your styles, you might want to use directly the Grid mixins v2 (github)

Grid mixins v3 (github)

Solution 4 - Css

The total width is calculated with the width of the elements plus the width of the margin space. If you want to remove the margin space, that's fine, but to avoid that gap you mentioned, you also need to increase the width of the columns.

In this case, you need to increase the width of a single column by its removed margin space, which would be 30px.

So let's say your columns width is 50PX normally with 30PX margin space. Remove the margin space and make the width 80PX.

Solution 5 - Css

Example 4 columns of span3. For other span widths use new width = old width + gutter size. Use media queries to make it responsive.

css:

    <style type="text/css">
	@media (min-width: 1200px) 
	{ 	
		.nogutter .span3
		{
			margin-left: 0px; width:300px;
		}	
	}
	@media (min-width: 980px) and (max-width: 1199px) 
	{ 
		.nogutter .span3
		{
			margin-left: 0px; width:240px;
		}	
	}
	@media (min-width: 768px) and (max-width: 979px) 
	{ 
		.nogutter .span3
		{	
			margin-left: 0px; width:186px;
		}	
	}
    </style>

html:

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

update: or split a span12 div in 100/numberofcolumns % width parts floating left:

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>

For both solutions see: http://bootply.com/61557

Solution 6 - Css

Interesting...

Removing the gutter in Twitter Bootstrap's Default grid, that is, 940px wide. And that the default grid has a 940px wide container and has the bootstrap-responsive.css in it's stylesheet.

If I got your question right, this is how I did it...

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
	<title>Stackoverflow Question</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	  <script src="assets/js/html5shiv.js"></script>
	<![endif]-->

	

								   
	<style type="text/css">
		#main_content [class*="span"] {
			margin-left: 0;
			width: 25%;
		}
		
		@media (min-width: 768px) and (max-width: 979px) {
			#main_content [class*="span"] {
			margin-left: 0;
			width: 25%;
			}
		}
		
		
		@media (max-width: 767px) {
			#main_content [class*="span"] {
			margin-left: 0;
			width: 100%;
			}
		}
		
		@media (max-width: 480px) {
			#main_content [class*="span"] {
			margin-left: 0;
			width: 100%;
			}
		}
		
		<!-- For Visual Aid Only -->
		.bg1 {
			background-color: #C2C2C2;
		}
		
		.bg2 {
			background-color: #D2D2D2;
		}
	</style>
  <body>
	<div id="wrap">
		<div class="container">
			<div class="row-fluid">
				<div class="span1 text-center bg1">01</div>
				<div class="span1 text-center bg2">02</div>
				<div class="span1 text-center bg1">03</div>
				<div class="span1 text-center bg2">04</div>
				<div class="span1 text-center bg1">05</div>
				<div class="span1 text-center bg2">06</div>
				<div class="span1 text-center bg1">07</div>
				<div class="span1 text-center bg2">08</div>
				<div class="span1 text-center bg1">09</div>
				<div class="span1 text-center bg2">10</div>
				<div class="span1 text-center bg1">11</div>
				<div class="span1 text-center bg2">12</div>
			</div>
		
		
		
			<div id="main_content">
				<div class="row-fluid">
					<div class="span3 text-center bg1">1</div>
					<div class="span3 text-center bg2">2</div>
					<div class="span3 text-center bg1">3</div>
					<div class="span3 text-center bg2">4</div>
				</div>
			</div>
		</div><!--/container-->
	</div>
  </body>
</html>

And the result is..

enter image description here

The 4 div span with no gutter will remain spanned for Small tablet landscape (800x600). Anything size smaller than that will collapse the 4 divs and it will be stacked vertically. Of course you will have to tweak it to fit your needs.

Solution 7 - Css

Simplest way to remove padding and margin is with simple css.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

Solution 8 - Css

Okay If you want to change the gutter inside one row, but want those (first and last) inner divs to align with the grid surrounding the .no-gutter row, you could copy-paste-merge most answers into the following snippet:

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

If you like to have a smaller gutter instead of completly none, just change the 0's to what you like... (eg: 5px to get 10px gutter).

Solution 9 - Css

Since no one has mentioned this, to add to the no-gutter answer above which works, if you want custom spaced gutters, all you have to do is specify the value in px for the margin left and right properties, and padding left and right properties like so;

.row.no-gutter {
margin-left: 4px;
margin-right: 4px;
}

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

Solution 10 - Css

Interesting...

Removing the gutter in Twitter Bootstrap's Default grid, 100% working. use g-0 class in the row it working in the format to g-x

<div class="row g-0">
<div class="col-md-2 col-sm-4">
    <div class="service-product-type">
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-1" ></div>
    </div>
</div>
<div class="col-md-2 col-sm-4 ">
    <div class="service-product-type">
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-2" ></div>
    </div>
</div>
<div class="col-md-2 col-sm-4 ">
    <div class="service-product-type">
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-3" ></div>
    </div>
</div>
<div class="col-md-2 col-sm-4 ">
    <div class="service-product-type">
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-4" ></div>
    </div>
</div>
<div class="col-md-2 col-sm-4 ">
    <div class="service-product-type">
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-5" ></div>
    </div>
</div>
<div class="col-md-2 col-sm-4 ">
    <div class="service-product-type">
        `enter code here`
        <header>
            Rocket/Missile
        </header>
        <div class="product-serice-img-6" ></div>
    </div>
</div>

Solution 11 - Css

To add to Skelly's Bootstrap 3 no-gutter answer above (https://stackoverflow.com/a/21282059/662883)

Add the following to prevent gutters on a row containing only one column (useful when using column-wrapping: http://getbootstrap.com/css/#grid-example-wrapping):

.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
    padding-right: 0;
    padding-left: 0;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Techie	View Question on Stackoverflow
Solution 1 - Css	Zim	View Answer on Stackoverflow
Solution 2 - Css	Dawson	View Answer on Stackoverflow
Solution 3 - Css	Sherbrow	View Answer on Stackoverflow
Solution 4 - Css	Michael	View Answer on Stackoverflow
Solution 5 - Css	Bass Jobsen	View Answer on Stackoverflow
Solution 6 - Css	GaryP	View Answer on Stackoverflow
Solution 7 - Css	Gammer	View Answer on Stackoverflow
Solution 8 - Css	Brainfeeder	View Answer on Stackoverflow
Solution 9 - Css	Samuel Isirima	View Answer on Stackoverflow
Solution 10 - Css	Saurabh Madhukar	View Answer on Stackoverflow
Solution 11 - Css	Stu	View Answer on Stackoverflow