Bootstrap 4 - Grid System
user-pcr
The Bootstrap 4 grid is built with flexbox, which is fully responsive and scales up to 12 columns (based on device size), creating a layout with rows and columns on the page. It provides a flexible mobile first fluid grid system that scales columns as device or viewport size increases.
Grid System Operation
-
Strings must be placed in the .container class to properly align and pad.
-
For a responsive width use the .container class and for a fixed width across the entire viewport use the .container-liquid class .
-
Use rows to create horizontal column groups.
-
Content must be placed inside columns, and only columns can be direct children of rows.
-
The columns contain padding to control the space between them.
-
If you fit more than 12 columns in a row, the columns will be placed on a new row.
-
Columns create gaps between the contents of the columns using padding. Therefore, you can remove margins from rows and padding for columns with the .no-gutters class on the row.
-
You can tailor the grid system using five grid breakpoints such as extra small, small, medium, large, and extra large.
-
Predefined grid classes such as .col-4 are available to quickly create grid layouts. Smaller mixins can also be used for more semantic layouts.
Strings must be placed in the .container class to properly align and pad.
For a responsive width use the .container class and for a fixed width across the entire viewport use the .container-liquid class .
Use rows to create horizontal column groups.
Content must be placed inside columns, and only columns can be direct children of rows.
The columns contain padding to control the space between them.
If you fit more than 12 columns in a row, the columns will be placed on a new row.
Columns create gaps between the contents of the columns using padding. Therefore, you can remove margins from rows and padding for columns with the .no-gutters class on the row.
You can tailor the grid system using five grid breakpoints such as extra small, small, medium, large, and extra large.
Predefined grid classes such as .col-4 are available to quickly create grid layouts. Smaller mixins can also be used for more semantic layouts.
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across multiple devices.
| Very small devices (<576 pixels) | Small devices (≥576px) | Medium devices (≥768px) | Large devices (≥992px) | Very large devices (≥1200 pixels) | |
|---|---|---|---|---|---|
| Mesh behavior | Horizontally at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Maximum container width | No (auto) | 540px | 720px | 960px | 1140px |
| class classes | .col- | .col-SM- | .col-MD- | .col-LG- | .col-XL- |
| Number of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width |
30px (15 pixels on each side of the column) |
30px (15 pixels on each side of the column) |
30px (15 pixels on each side of the column) |
30px (15 pixels on each side of the column) |
30px (15 pixels on each side of the column) |
| Invested | Yes | Yes | Yes | Yes | Yes |
| Order column | Yes | Yes | Yes | Yes | Yes |
30px
(15 pixels on each side of the column)
30px
(15 pixels on each side of the column)
30px
(15 pixels on each side of the column)
30px
(15 pixels on each side of the column)
30px
(15 pixels on each side of the column)
Main grid structure
Following is the basic grid structure of Bootstrap 4 −
<div class = "container" > <div class = "row" > <div class = "col-*-*" ></div> <div class = "col-*-*" ></div> </ div> <div class = "row" > <div class = "col-*-*" ></div> <div class = "col-*-*" ></div> <div class = "col-* -*" ></div> </div><div class = "row" > ... </div> </div>
Grid system example
Creating Two Column Layouts
The following example describes how to create two column layouts for small, medium, and large devices. On smaller devices such as mobile phones, columns automatically become horizontal by default.
Following is an example of Bootstrap 4 grid system −
Creating three-column layouts
The following example describes how to create three column layouts for medium and large devices. If the screen resolution is greater than or equal to 992 pixels, it will be displayed in tablet mode in landscape mode and, as usual, in portrait mode.
