Bootstrap: Is Bootstrap V4 going to provide different & configurable Grid Gutter sizes?

[gkatsanos]

For example: https://getuikit.com/docs/grid.html#grid-gutter

[IamManchanda]

+1 , Reminds me of no-gutters ( #19107 & added in #21211 )

.no-gutters {
    margin-right: 0;
    margin-left: 0;
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }

So, yeah something like small, medium and large-gutters looks a good idea
here is the code for it ,

.small-gutters {
    margin-right: -15px;
    margin-left: -15px;
    > [class*="col-"] {
      padding-right: 15px;
      padding-left: 15px;
    }
  }

.medium-gutters {
    margin-right: -30px;
    margin-left: -30px;
    > [class*="col-"] {
      padding-right: 30px;
      padding-left: 30px;
    }
  }

.large-gutters {
    margin-right: -45px;
    margin-left: -45px;
    > [class*="col-"] {
      padding-right: 45px;
      padding-left: 45px;
    }
  }

Special Note: Small gutters in my example is the one which is the default for bootstrap row

[mdo]

Customizable grid gutters are available by breakpoint, but not with a modifier class. No plans to add such classes at this time.

[gkatsanos]

That's a definite deal-breaker. I've had plenty of occasions I had to do this manually so I'll be choosing a different framework from now on.
Thanks

[mdo]

@gkatsanos Sounds good! While I mentioned there are no plans to add such classes at this time, that doesn't mean they can't be added down the line. I'm not sure if @IamManchanda's solution is the best, but this seems like a rather straightforward modification to make (on our end or your's).

[gkatsanos]

@mdo I'm sorry, do you mind clarifying a bit what you mean by this time" and "down the line" ? It seems as if your former answer and the latter conflict a bit.
Technically the way I see it, the Bootstrap grid is conceived in a way which makes variable grid sizing complex. (even though it's achievable but with side-effects)

FYI I don't want to sound bitter; I've used Bootstrap for over 3 years in very high volume websites. But Designers and Product people want control over the results, and they won't always accept one size gutters in the products they design.
http://ink.sapo.pt/ui-elements/grid/#gutters

[mdo]

I don't see a conflict with those comments—we're not going to add custom gutters beyond the gutter per grid tier at this time. In the future, we might revisit that and better enable folks to change gutters ad hoc on rows/columns.

Styles for such a solution likely look an awful lot like @IamManchanda's code snippet fwiw.

[gkatsanos]

Yeap, @IamManchanda 's solution seems the way to go, but there's the .container-fluid class as well with padding-right and padding-left values which depend on the gutter size, right?

[IamManchanda]

@gkatsanos This comment ( https://github.com/twbs/bootstrap/pull/21211#issuecomment-265346365 ) might help you with your doubts .

Container and container-fluid both have a padding of 15px on right and left. Its just a difference that container is a fixed width ( media query breakpoints ) and whereas container-fluid has a 100% width no matter the device screen size.

[gkatsanos]

@IamManchanda I understand that. So If you add a "no-gutters" class on the "row" div, how are you going to modify the left/right padding values of the "container" (or container-fluid) , since it's a parent element of row and not a child?

[IamManchanda]

could you jsbin/codepen your issue you facing with my above code ? @gkatsanos

[gkatsanos]

@IamManchanda Sorry for the slow reply. I made this: http://codepen.io/gkatsanos/pen/WRrZBx . As you can see from the 'debug' borders, the external 'container-fluid' paddings are inconsistent. If you resize down to smaller than 992px viewport, you'll clearly see horizontals scrollbars or extra paddings.. the only workaround is adding extra responsive logic to the gutter sizing classes so they're cancelled when on mobile but still that's far from bulletproof (and it has to do with the way the Bootstrap grid works)

[IamManchanda]

@gkatsanos So do you have any suggested fix ( code ) and a best solution ?
Also , Please use ..... v4 alpha 6 instead of v3.3.7 in your codepen settings

Sorry for the slow reply

No need to be sorry!

[gkatsanos]

The solution would involve radical changes in how the grid is built (solved in other grid systems of other frameworks) and I doubt @mdo would put it forward.

[gkatsanos]

I'd like to raise that issue again.