BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid.
How it works: Here’s how the grid system comes together:
Its grid supports six responsive breakpoints. You can control container, column sizing and behavior by each breakpoint.
Containers center and horizontally pad your content. Use container class for responsive width and container-fluid class for 100% width across all viewports and devices. Use container-md class for both fluid and pixel width.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns.
Gutters are also responsive with customizable available across all breakpoints. We can change horizontal gutters with .gx-* and vertical gutters with .gy-*
BootStrap5 Layout Grid System:
Grid options: Bootstrap’s grid system works for all six breakpoints i.e xs, sm, md, lg, xl, xxl.
Auto-layout columns: This provides the creation of easy column sizes without an explicit numbered class.
Responsive classes: They provide predefined classes for building complex responsive, dynamic, and flexible layouts.
Nesting: We need to add a new row and set of columns for nesting which includes a set of columns that add up to 12 or fewer.
Sass: This system also provides Sass variables and mixins to create custom and responsive page layouts.
Customizing the grid: This is used to customize your grid as you want by using built-in grid Sass variables and map.
Example 1: Let's see an example of auto-layout columns.
