Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5 [duplicate]
How do you create a gutterless grid in bootstrap 4?
Is there an official API for removing the gutter or is it manual?
Bootstrap5: Comes with gutter utilities
- all viewports
g-0
..g-5
- responsive viewports
g-sm-0
..g-lg-5
- horizontal/vertical
gy-0
..gx-5
Example with zero-gutter width:
<div class="container">
<div class="row g-0">
<div class="col-6">
<div class="p-3 border bg-light">...</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">...</div>
</div>
</div>
</div>
Bootstrap4:
Comes with .no-gutters
out of the box.
source: https://github.com/twbs/bootstrap/pull/21211/files
Bootstrap3:
Requires custom CSS.
Stylesheet:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
Then to use:
<div class="row no-gutters">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
It will:
- Remove margin from the row
- Remove padding from all columns directly beneath the row
You should use built-in bootstrap4 spacing classes for customizing the spacing of elements, that's more convenient method .