{{title}}
How it works
MaterialWrap's layouts are based off the Bootstrap 4 grid system that uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.
For a more in depth explanation on how this works you can head over to their site and take a look at their documentation.
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.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
---|---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Offsets | Yes | ||||
Column ordering | Yes |