Remove Gutter Space For a Specific Div Only

Remove gutter space for a specific div only

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)

Remove gutter from Bootstrap 4 grid

The narrow effects for container and gutter from Susy can be achieved easily in Bootstrap using three key changes:

Omit using container or container-fluid class, as stated in the documentation.
Edit: If you need to restrict the container to 1280px, check the edit below.
Set default padding of columns to 25px on each side (so 50px total), instead of the initial 30px total
Adjust the negative margin on the row to reflect the gutter change by modifying the default to -25px margin on each side

So essentially your CSS would be:

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

One advantage of this approach is its responsiveness – it is not locked to any screen size such as 1280px. This can be seen in action in this jsfiddle snippet or below. Have added some responsive width output for debugging and testing in the former, omitted in the snippet below for brevity.

Edit: If you need to have the container size restricted to 1280px, you could do:

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

The above will ensure that the container stays at maximum 1280px when the screen is 1280px in width or more, or stick to the default Bootstrap responsiveness when it is less. If you do prefer to have it always at 1280px, remove the media breakpoint and set both width and max-width to 1280px.

#example-row {  background: #0074D9;  margin-top: 20px;}
.example-content {  display: flex;  height: 80px;  background-color: #FFDC00;  text-align: center;  align-items: center;  justify-content: center;}
.row {  margin-left: -25px;  margin-right: -25px;}
.col,[class*="col-"] {  padding-right: 25px;  padding-left: 25px;}
@media (min-width: 1280px) {  .container {    max-width: 1280px;    padding-left: 0;    padding-right: 0;  }}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" id="example-container">  <div class="row" id="example-row">    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>  </div></div>

Remove spacing between cols

add a class when you need to remove spaces use it

.padding-0{
    padding-right:0;
    padding-left:0;
}

in html write this class

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

Removing gutters from bootstrap columns not working (I have checked other stackoverflow posts about it) None worked

This is not gutter space. It is container effect, just remove that (or just class name) like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <!-- Booststrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/stylesheets/login.css">    
</head>
<body>
    
        <div class="row g-0">
            <div class="col-6 columnA">
                Column
            </div>
            <div class="col-6 columnB">
                Column
            </div>
        </div>
    


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 4 How to remove these margin/padding in the row class

In Bootstrap 4 you can use this:

<div class="row">
    <div class="col-md-4 px-0">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 px-0">...</div>
</div>

https://getbootstrap.com/docs/4.3/utilities/spacing/

https://getbootstrap.com/docs/4.3/layout/grid/#gutters

Changing Bootstrap 4 gutters without Sass

The gutter also applies to the container which creates the outermost (left & right) gutters...

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

Demo

Bootstrap 4 columns and rows producing unwanted padding

Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements

See the Bootstrap documentation about gutters.

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ddd" class="col-sm-3">d</div>
</div>

Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.

Remove Gutter Space For a Specific Div Only