Bootstrap 5 Gutters are used to give padding between columns, responsively space, and align content to the grid system.
How gutters works?
Using the .padding-right and .padding-left classes, we can add padding to the right and left of each column. Gutters, which are produced by horizontal padding, are spaces between the content of columns.
Gutters begin at a width of 1.5 rem (24 px).
Bootstrap 5 Gutters:
Horizontal gutters: Horizontal gutter is used for horizontal padding between columns, responsively space, and aligning content to the grid system.
Vertical gutters: Vertical gutter is used for vertical padding between columns.
Horizontal & vertical Gutters: In bootstrap 5, horizontal & vertical gutters are used to give horizontal & vertical padding between columns.
Row columns gutters: This gutter is used to create responsive space in our grid.
No gutters: No gutters remove margin and padding from rows and columns.
Example 1: Let us see an example of vertical width by using the .gy-* class.
