How to adjust Bootstrap 5.3 gutters

The gutter is the space between columns in the Bootstrap grid system. By default, Bootstrap 5.3 uses a gutter width of 1.5rem (24px) on all screen sizes. However, you can easily adjust the gutter width to suit your needs.

There are two main ways to adjust the gutter width in Bootstrap 5.3: by modifying the SCSS variables or by using the .gutter-* utility classes.

Modifying SCSS Variables:

The gutter width is controlled by the $grid-gutter-width variable in Bootstrap's SCSS files. To change the gutter width, you can modify this variable in your own SCSS file and then recompile the CSS.

Example:

$grid-gutter-width: 30px;

This will set the gutter width to 30px.

Using Utility Classes:

Bootstrap 5.3 also includes a set of .gutter-* utility classes that you can use to adjust the gutter width on specific screen sizes.

Example:

<div class="container gutter-sm-5">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

In this example, the gutter width is set to 5px on small screens and above.

You can also use .no-gutters class on the row to completely remove the gutters.

<div class="container">
  <div class="row no-gutters">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

It's worth noting that changing the gutter width can affect the overall layout of your design, so be sure to test your changes on different screen sizes and devices.

In summary, Bootstrap 5.3 provides two easy ways to adjust the gutter width, modifying the SCSS variables or using the .gutter-* utility classes. Remember to always test any changes on different screen sizes to ensure a good layout design.