Bootstrap 5 Grid System

Bootstrap 5 grid system working 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 examle .container-md.

3.0 Rows are wrappers for columns

Rows exist within the container element while 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 determined with the help of percentages so you always have the same relative sizing.