Grid System Columns and Gutters

Columns are divided into 12 equal parts, allowing you to create flexible and responsive designs. Gutters are the spacing between columns, which can be adjusted using predefined classes. The number of columns and the gutter width can be changed using the SASS version. For this, you can use the $grid-columns and $grid-gutter-width for changing the maximum width occupied by the container at the various breakpoints.

Variables needed to control Grid Columns and gutters and their default values

• $grid-columns[12]: This variable is used to customize the number of grid columns in the grid.
• $grid-gutter-width[1.5rem]: This variable is used to control the amount of padding between the columns of the grid.

Syntax:

$grid-columns: integer-value;
$grid-gutter-width: value;

Bootstrap Grid system is one of the most versatile layouts which we can use and it has different responsive variants which can be used to add custom responsiveness. Bootstrap Grid system provides a responsive layout with columns and gutters. Customizing the grid is essentially changing the number of columns or gutters’ width or changing the breakpoints at which the grids will attain the specific width given to them.