Bootstrap 5 Layout Gutters

Gutters are the gaps between the columns in bootstrap's grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below:

Bootstrap5 Layout Gutter Modifier Classes:

• g-*: This class is used to set the width of the gutter.
• gx-*: This class is used to set the width of the gutter in the horizontal direction.
• gy-*: This class is used to set the width of the gutter in the vertical direction.

* can range from 0-5

Syntax:

<div class="container">
 <div class="row g-3">
 <div class="col">
 ...
 </div>
 <div class="col">
 ...
 </div>
 </div>
</div>

 

Example 1: In this example, we used the horizontal gutter classes to change the spacing between the bootstrap's grid columns.

Output:

👁 Image

Example 2: In this example, we use the gutter modifier class which sets both horizontal and vertical gutter.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.2/forms/layout/#gutters