Bootstrap: Can we add sm, md, lg & large to .no-gutters?

[brettalton]

I find when I'm making websites that I'll often want .no-gutters only on small screens, to keep a 3 column grid on small devices. This is dependent on the design of course, but I find it useful.

Can we look at adding .no-gutters-sm, .no-gutters-md, .no-gutters-lg and .no-gutters-xl to use this Bootstrap-specific property with breakpoints?

Current: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Notation with breakpoints: https://getbootstrap.com/docs/4.0/utilities/spacing/#notation

[LarryAzevedo]

Technically, Bootstrap does not need the .no-gutters class. You could just use the spacing classes. But I know what you're saying... it's easier to just type into one class attribute.

[XhmikosR]

Duplicate of #26200

[kailynnelson]

Technically, Bootstrap does not need the .no-gutters class. You could just use the spacing classes. But I know what you're saying... it's easier to just type into one class attribute.

@LarryAzevedo, I've used your solution before in most cases. But we have a case where we want to keep gutters on most screens, but then only on sm hide the gutters. Instead of using a media query and setting margin-left: 0; and margin-right: 0; I'd like to use a Bootstrap class.

[martinkariuki7]

Yes! Please add this :)

[pepebe]

Jumping on the bandwagon. I also don't see how spacing classes can solve the problem with the needed negative margin on the row element as there is not css class available putting a negative margin on an element (easily done by messing with the sass files, but for "normal" folk not an option).

[ffoodd]

@pepebe You may want to look closer at the documentation: https://getbootstrap.com/docs/4.4/utilities/spacing/#negative-margin

[pepebe]

@ffoodd Totally missed that one. Thanks!

.mt-n1 {
  margin-top: -0.25rem !important;
}

[ProxyJoshua]

u could use
<div class="px-0 px-sm-3"></div>
p3=1rem