How do you create a gutterless grid in bootstrap 4?
Is there an official API for removing the gutter or is it manual?
This question is related to
twitter-bootstrap
bootstrap-4
You can use the mixin make-col-ready
and set the gutter width to zero:
@include make-col-ready(0);
You should use built-in bootstrap4 spacing classes for customizing the spacing of elements, that's more convenient method .
You can use this css code to get gutterless grid in bootstrap.
.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid{
margin-left: 0;
margin-right: 0;
}
.no-gutter>[class^="col-"]{
padding-left: 0;
padding-right: 0;
}
Need an edge-to-edge design? Drop the parent
.container
or.container-fluid
.
Still if you need to remove padding from .row
and immediate child columns you have to add the class .no-gutters
with the code from @Brian above to your own CSS file, actually it's Not 'right out of the box', check here for official details on the final Bootstrap 4 release: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Source: Stackoverflow.com