Skip to main content
Version: 2.0.0

Grid

Today, it is difficult to find a responsive grid as complete and efficient as the one proposed by boostrap. minstyle.io therefore integrates the bootstrap grid (V5). The complete documentation is available here.

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

Live Editor
Result
Loading...

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
≤ 576px
sm
≥ 576px
md
≥ 768px
lg
≥ 992px
xl
large ≥ 1200px
xll
large ≥ 1400px
Max container widthNone (auto)540px720px960px1140px1320px
Class prefix.col-.col-sm--.col-md-.col-lg-.col-xl-.col-xll-
# of columns12
Gutter width1.5rem (.75rem on left and right)
Custom guttersYes
NestableYes
Column orderingYes

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

See more

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

See more

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

See more