In this tutorial, I will show you how to change the size of space between columns (also known as gutters) in Bootstrap 5.

Gutters in Bootstrap 5

In Bootstrap 5 grid system, gutters are the padding (the space) between columns are. According to the official documentation, the default build of Bootstrap allows you to choose 6 different values (From 0 to 5). gx-0 to gx-5 for the horizontal gutter widths, gy-0 to gy-5 for the vertical gutters or g-0 to g-5 for vertical and horizontal gutters.

For example, in the following Bootstrap grid, gutters are set to g-1 :

<div class="row g-1">
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <!-- ... other columns -->
</div>

And here it is set to g-5 :

<div class="row g-5">
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <!-- ... other columns -->
</div>

Changing gutters size: the official way

Changing the space width to another value different from what we mentioned previously requires you to edit Bootstrap SASS source.

You need to add new range of value or change existing one value, and recompile it after that.

The official documentation mentions that the following variables are the Bootstrap SASS variables to edit:

$grid-gutter-width: 1.5rem ;
// $gutters: $spacers !default; // which are :
$gutters:  (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Some developers may prefer this method but for my case I prefer the following one:

Changing gutters size using CSS variable

If you look deeply at Bootstrap codes and how it defines CSS rules of the gutters, you will find that it uses CSS variables --bs-gutter-x (or --bs-gutter-y) to define the spacing (and all the margin, or padding of the row or the columns which result with it).

From this observation, we can deduce another easy way to change the size of the gutters: by redefining the value of these CSS variables.

Therefore, for example, what you can do is to define a custom class (such as .g-custom) and re-assign bootstrap CSS variable --bs-gutter-x (or --bs-gutter-y) for this class. Here we set the value to 2rem (which is not available with the default build of Bootstrap):

.g-custom{
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

<div class="row g-custom">
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <div class="col-4">
        <div class="col-content"></div>
    </div>
    <!-- ... other columns -->
</div>

Result :

Please note that at this time, Bootstrap 5 is still in beta stage so it may changes in future version.

Use case:

Here are some use cases in which you may use this gutter size customization:

• Set customized gutter sizes which are not available with Bootstrap default build
• Change gutters width dynamically with Javascript. For example, instead of varying class from g-0 to g-5, modifying the CSS variable may be a better option.

Thank you for passing by and reading this tutorial.

Check out my personal blog to see more.