Is there a way, to customizing grid gutters in each breakpoints?
I know, that Twitter pay dollars of millions to make Bootstrap v4 perfect and I don’t want to reform everything in a day, but I’m just curious, that is there a way to make my custom gutters, not just only one.
Like: I want the gutter at large size to be 30px
, but on smaller devices I want it to be 24px
and on mobile 20px
3
Answers
You can add your custom gutter like this :
And then you’ll have to update the padding on smaller devices with media queries.
You need to go on your-folder/node_modules/bootstrap/scss/_variables.scss and search :
You can also change the breakpoints :
I’ve just made a package that allows the customisation of the gutters and container margins per break-point: https://github.com/BenceSzalai/bootstrap-responsive-grid