Bootstrap 5 (latest update in 2021)

With Bootstrap 5, there are brand new gutter classes specifically tailored to adjusting gutters for entire rows. These gutter classes can be used responsively for each breakpoint (e.g., gx-sm-4).

• Use g-0 for no gutters.
• Use g-(1-5) to adjust horizontal and vertical gutters using spacing units.
• Use gy-* to adjust vertical gutters individually.
• Use gx-* to adjust horizontal gutters individually.

Bootstrap 4 (no extra CSS required)

Bootstrap 4 comes with a handy no-gutters class that can be added to the entire row:

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

New spacing utilities have been introduced in Bootstrap 4 to control padding and margins. This allows for easy adjustment of padding (gutter) for single columns (e.g.,

<div class="col-3 pl-0"></div>

) where padding-left:0; sets no left padding on the column, or using px-0 removes both left and right padding (x-axis).

Bootstrap 3 (original solution)

In the case of Bootstrap 3, utilizing gutters is much simpler. Bootstrap 3 utilizes 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;
}

To remove spacing, simply include no-gutter in any rows:

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

See demo here:

Check out the latest update for TWBS 3 at getbootstrap.com/customize/#grid-system

---

If you're looking to customize your Twitter Bootstrap experience, you can use the form provided here to download specific components with custom configurations.

Want a grid without gutters that is still responsive? Just download the grid component along with the necessary responsive ones related to width using this form.

For a demonstration of this in action, check out this demo on jsfiddle.

If you have some knowledge of LESS, you can include the generated CSS within a selector of your choice like so:

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

If not, simply add this selector in front of each rule (which isn't too much work).

---

For those who are comfortable with LESS and utilize LESS scripts for styling management, consider using the Grid mixins directly from the following sources:

Grid mixins v2 on Github

Grid mixins v3 on Github

To calculate the total width, you have to consider both the element's width and the margin space. Removing the margin is okay, but to prevent the gap you mentioned, you should also increase the column widths.

For example, if a single column has a width of 50px with a 30px margin space, removing the margin means increasing the width to 80px.

By adjusting the column widths in this way, you can ensure that there are no gaps in the layout.

Here is an example of creating 4 columns with a span of 3 each. To adjust the span width, simply add the gutter size and use media queries for responsiveness.

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: Another option is to divide a span12 div into equal parts based on the number of columns by using percentages and 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 more examples, you can visit:

Interesting...

Tweak the Twitter Bootstrap's Default grid layout by eliminating the gutter spacing. This can be achieved by using the g-0 class within the row, altering 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>
... (additional code snippets)

That's quite intriguing...

I recently experimented with eliminating the gutter in Twitter Bootstrap's Default grid, which is typically 940px wide. This grid also includes bootstrap-responsive.css in its stylesheet.

If I understand your query correctly, here's how I approached it...

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

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

    <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%;
            }
        }

        .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 here's what you can expect...

The four divs without any spacing will retain their layout for small tablet landscape (800x600). For sizes smaller than that, the divs will collapse and stack vertically. It may require some adjustments based on your specific requirements.

Easiest method for eliminating padding and margin is by utilizing basic css.

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

For those looking to adjust the gutter within a single row while ensuring that the first and last inner divs align with the grid surrounding the .no-gutter row, you can utilize the code snippet below:

.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 prefer to have a smaller gutter as opposed to no gutter at all, simply modify the values from 0 to your desired size (e.g. changing 5px will result in a 10px gutter).

Adding onto the previous responses, one method to customize gutter spacing is by specifying pixel values for the margin and padding properties. Here's an example:

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

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