Postavitev
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
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 explanation for how the grid system comes together.
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Grid
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
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- |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on left and right) | |||||
Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
Gutters
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
Gutters are the gaps between column content, created by horizontal padding.
Gutters are the gaps between column content, created by horizontal padding. Gutters start at 1.5rem (24px) wide. Gutters can be responsively adjusted.