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 bootstrapStep 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
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GFG Example</title>
<link href=
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
$grid-columns: 14;
$grid-breakpoints: ( xs: 0,
sm: 600px,
md: 800px,
); $grid-gutter-width: 2.5rem;
@import "./node_modules/bootstrap/scss/bootstrap";
|
Output:
Example 2: In this example, we are customizing the grid system using mixins.
index.html
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GFG Example</title>
<link href=
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
@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);
}
} |
Output:
Refernce: https://getbootstrap.com/docs/5.0/layout/grid/#sass