Bootstrap 5 Grid System SASS

Last Updated : 11 Jan, 2024

Bootstrap’s grid system uses containers, rows, and columns to create responsive layouts and align content. The default Bootstrap Grid System allows a maximum of 12 columns across the page. One can use all 12 columns individually or you can group them together.

The Bootstrap allows to further customize the grid system using SASS. We can achieve this by using variables and mixins.

Bootstrap 5 Grid System SASS Variables

$grid-columns: It denotes the number of columns allowed across the webpage. It is 12 by default.
$grid-gutter-width: It denotes the gutter width i. e. the gaps between column content. It is by default 1.5rem.
$grid-breakpoints: It represents the breakpoints for responsiveness. Default values are xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px.
$container-max-widths: It determines the maximum width of the container. Default values are sm: 540px, md: 720px,lg: 960px, xl: 1140px, xxl: 1320px.

`Syntax:`

// Variables 
$grid-columns:  
$grid-gutter-width: 
$grid-breakpoints: () 
$container-max-widths: ();

Bootstrap 5 Grid System SASS Mixins

@include make-row(): It creates a row a wrapper for columns.
@include make-col-ready(): It is making the element grid-ready.
@include make-col($size, $columns: $grid-columns): It creates columns of certain size when defined.
@include make-col-offset($size, $columns: $grid-columns): To set the offset of the column.

Syntax:

// mixins
@include make-row();
@include make-col-ready();
@include make-col();
@include make-col($size, $columns: $grid-columns);
@include make-col-offset($size, $columns: $grid-columns);

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.

$class_to_override: values;
@import "node_modules/bootstrap/scss/bootstrap"

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

Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap css

Example 1: In this example, we will use the SASS variable to customize the row and columns.

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>GFG Example</title> 
    <link 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet" /> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>BootStrap 5 Grid system SASS</h3> 
    </div> 
    <div class="container"> 
        <div class="row"> 
            <div class="col-md-1 col-sm-7 bg-primary"> 
                1 
            </div> 
            <div class="col-md-2 col-sm-7 bg-warning"> 
                2 
            </div> 
            <div class="col-md-4 col-sm-2 bg-info"> 
                3 
            </div> 
            <div class="col-md-5 col-sm-6 bg-danger"> 
                4 
            </div> 
            <div class="col-md-2 col-sm-6 bg-success"> 
                5 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

style.scss

CSS

$grid-columns: 14; 
$grid-breakpoints: ( 
    xs: 0, 
    sm: 600px, 
    md: 800px, 
); 
$grid-gutter-width: 2.5rem; 
@import "./node_modules/bootstrap/scss/bootstrap"; 

Output:

20230720_214611

Example 2: In this example, we are customizing the grid system using mixins.

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>GFG Example</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet" /> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>BootStrap 5 Grid system SASS</h3> 
    </div> 
    <div class="custom-container"> 
        <div class="custom-row"> 
            <div class="custom-col bg-danger">1</div> 
            <div class="custom-col bg-info">2</div> 
            <div class="custom-col bg-warning">3</div> 
            <div class="custom-col bg-success">4</div> 
        </div> 
    </div> 
</body> 
  
</html>

style.scss

CSS

@import "./node_modules/bootstrap/scss/bootstrap.scss"; 
.custom-container { 
    @include make-container(); 
    width: 500px; 
} 
.custom-row { 
    @include make-row(); 
} 
.custom-col { 
    @include make-col(); 
    @include media-breakpoint-up(sm) { 
        @include make-col(4); 
    } 
    @include media-breakpoint-up(lg) { 
        @include make-col(6); 
    } 
} 