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
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.