Bootstrap 5 Change the gutters

Last Updated : 16 Jan, 2023

Bootstrap 5 Change the gutters uses $spacer to make the $gutters SASS map. The gutters are used to give padding between the columns, responsively space, and align content to the grid system.

Below is the list of default values of the $gutters map:

$grid-gutter-width: 1.5rem;
$gutters: (
      0: 0,
      1: $spacer * .25,
      2: $spacer * .5,
      3: $spacer,
      4: $spacer * 1.5,
      5: $spacer * 3,
);

SASS variables of gutters:

$spacer: The value of this variable is set to change the default values of gutters.

Steps to override SCSS of Bootstrap:

Step 1: Install bootstrap using the following command

npm i bootstrap

Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.

@import "../node_modules/bootstrap/scss/bootstrap.scss";
$variable_to_override: value;

Step 3: Convert the SCSS file to CSS using a live server extension.

Step 4: Include that CSS file in your HTML file.

<link rel="stylesheet" href="./assets/css/style.css">

Project Structure:

Syntax: $key is 0, 1, … and $values is 0, $spacer * .25, … in gutters sass map.

@each $key, $value in $gutters {
    .g -#{ $key } {
        --#{ $prefix } gutter - x: #{ $value };
        --#{ $prefix } gutter - y: #{ $value };
    }
    .gx -#{ $key } {
        --#{ $prefix } gutter - x: #{ $value };
    }
    .gy -#{ $key } {
        --#{ $prefix } gutter - y: #{ $value };
    }
}

Example 1: .g-2 class is used in this example which can be changed from the default values by setting the values of $spacer: 5rem.

style.scss

CSS

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 
  
$grid-gutter-width: 1.5rem; 
$spacer: 5rem; 
$gutters: ( 
    0: 0, 
    1: $spacer * .25, 
    2: $spacer * .5, 
    3: $spacer, 
    4: $spacer * 1.5, 
    5: $spacer * 3, 
); 
  
@each $key, $value in $gutters { 
    .g-#{$key}{ 
        --#{$prefix}gutter-x: #{$value}; 
        --#{$prefix}gutter-y: #{$value}; 
    } 
}

style.css

CSS

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

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Change the gutters</title> 
    <link rel="stylesheet" href="./assets/css/style.css"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap5 Change the gutters</h2> 
        <br> 
        <div class="container"> 
            <div class="row g-2"> 
                <div class="col-6"> 
                    <div class="p-3 border bg-success"> 
                        <h6>Java</h6> 
                    </div> 
                </div> 
                <div class="col-6"> 
                    <div class="p-3 border bg-success"> 
                        <h6>C++</h6> 
                    </div> 
                </div> 
                <div class="col-6"> 
                    <div class="p-3 border bg-success"> 
                        <h6>C</h6> 
                    </div> 
                </div> 
                <div class="col-6"> 
                    <div class="p-3 border bg-success"> 
                        <h6>Python</h6> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: .gx-5 class is used in this example which changes gutters in the x-axis.

style.scss

CSS

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 
  
$grid-gutter-width: 1.5rem; 
$spacer: 4rem; 
$gutters: ( 
    0: 0, 
    1: $spacer * .25, 
    2: $spacer * .5, 
    3: $spacer, 
    4: $spacer * 1.5, 
    5: $spacer * 3, 
); 
  
@each $key, 
$value in $gutters { 
    .gx-#{$key} { 
        --#{$prefix}gutter-x: #{$value}; 
    } 
}

style.css

CSS

.gx-5 { 
  --bs-gutter-x: 12rem; 
}

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <link rel="stylesheet" href="./assets/css/style.css"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Change the gutters</h2> 
        <br> 
        <div class="container px-4"> 
            <div class="row gx-5 text-white"> 
                <div class="col"> 
                    <div class="p-3 bg-dark"> 
                        <h5>HTML</h5> 
                    </div> 
                </div> 
                <div class="col"> 
                    <div class="p-3 bg-dark"> 
                        <h5>CSS</h5> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>