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.
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
.
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
.
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.
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.
Bootstrap’s grid system utilies six breakpoint that could be apply to adapt custom layout design.These six grid tiers are mentioned below.
Each of these breakpoints has its own container, unique class prefix, and modifiers. Lets us visualize the grid changes across this breakpoint.
Note:Follow the above mention concept to create a bootstrap grid system.
Extra small(xs) <576px | Small(sm) ≥576px | Medium(md) ≥768px | Large(lg) ≥992px | Extra large(xl) ≥1200px | XX-Large (xxl)≥1400px | |
---|---|---|---|---|---|---|
container max-width | None(auto) | 540px | 720px | 960px | 1140px | 1320px |
class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
Total Column | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter width | 1.5rem (.75rem on left and right) | |||||
Custom gutters | Yes |