Bootstrap 5 Grid System
Bootstrap 5 grid system works on the basis of the flexbox concept that creates a responsive layout. It uses containers, rows, and columns to layout and aligns the content.
How Grid System Works?
1.0 Responsive Breakpoint:
Bootstrap grid system provides six responsive breakpoints namely .col-*,.col-sm-*,.col-sm-*,.col-md-*, .col-lg-*,.col-xl-*, and .col-xxl-* that works on the basis of min-width media query,it starts working from the starting breakpoint till all those above breakpoint if not exist further other breakpoint. example .col-sm-3 applies to sm,dm, lg,xl and xxl while as in .col-sm-3.col-lg-3 ,col-sm-3 applies to sm,dm and col-lg-3 applies to lg,xl and xxl.
2.0 Containers center and horizontally pad your content
There are three type of container namely fixed with container,full width container and responsive container.Fixed width container can be achieved by using .container-class,full-width container can be achieved by .container-fluid class while as responsive class can be achieved by .container-{breakpoint} class example .container-md.
3.0 Rows are wrappers for columns
Rows exist within the container element while as all the columns exist within rows. Rows show different layouts with respect to the breakpoint of the column.
4.0 Columns are incredibly flexible
Bootstrap grid system provides a 12 column grid system, that allows creating a different layout(e.g., col-6 spans six). widths determine with the help of percentages so you always have the same relative sizing.
If you want to learn more about Bootstrap 5 grid system, click here.
