Maybe is a dumb question, but i still don´t understand it correctly. I´m seeing the bootstrap v5 documentation and there are a lot of changes from v4 and one of them are the gutters.
Can anyone explain me what is the difference in using gutters vs margin utilities?, When is recommended to use margins and when gutters?
Thanks for your help!
Gutters only apply to the Bootstrap grid, while margins can be used anywhere.
Gutters specifically adjust the margins & padding on the Bootstrap grid row and col which effects the spacing between columns inside the row.
Other the other hand, margins could be used on any element.
The gutters are more efficient for changing grid spacing. Margins/padding could still be used to accomplish the same effect, but would require changes on every column. For example, the following rows appear the same, but using gutter on the 1st row is less markup...
<!-- no gutters to 0 -->
<div class="row gx-0">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- no gutters using margins and padding -->
<div class="row m-0">
<div class="col px-0">
</div>
<div class="col px-0">
</div>
<div class="col px-0">
</div>
<div class="col px-0">
</div>
</div>