Bootstrap 4 Grid System
Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.
Here's an example of a Bootstrap grid:
The numbers at the end of each class name represent the number of columns that the column spans. So .col-sm-1 spans one column and .col-sm-8 spans eight. The sm means that the colspan applies to small devices and everything above. You can also use md, lg, and xl for medium, large, and extra large.
Extra small devices are catered for by omitting the middle abbreviation. For example .col-8 spans eight columns on extra small devices and up (in other words, all devices).
Stacked to Horizontal
The following example uses the same markup, but this time we use md for "medium". This means that, if the viewport is smaller than "medium" (i.e. less than 768 pixels), the cells in the grid will be stacked on top of each other, and each cell will take up the full width.
If you are viewing this on a wide screen, this example might not look any different to the previous one. However, if you resize your browser down, the cells will eventually shift into the stacked position (and the previous example will remain intact).
Grid Sizes
The following table shows how different grid options work with different viewport sizes.
| 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- |
| Number of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Note that with the introduction of version 4, Bootstrap now uses a 5 tier grid system (as opposed to the 4 tier grid system in Bootstrap 3).
Things to Remember with Grids
Containers
Grids should be placed within a container (i.e. using either .container class or the .container-fluid class) for proper padding and alignment.
Rows & Columns
Rows contain one or more columns. Columns contain the content. Only columns can be immediate children of rows.
Padding
Columns contain padding. However, the padding on the first and last columns is offset by a negative margin on the row. This is why the above examples are outdented — it is so the content within the grid lines up with content outside the grid.
More than 12 Columns per Row?
If more than 12 columns are placed in a row, the columns will wrap to a new line. That is, columns will wrap as a group. So for example, if a row contains a col-md-10 and a col-md-3, the whole col-md-3 will wrap to the new line.
Less than 12 Columns per Row?
You don't have to use up all 12 columns. You can use any number of columns up to 12 (before it will wrap to the next line). For example, you could have a row where the total column count spans say, 3 columns.
Grid Classes
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. So using any .col-sm-* class will affect not only small viewports, but also medium, large, and extra large (unless there's also a col-md-* and/or col-lg-*/col-xl-* present).
Multiple Classes
You can use multiple class sizes for a given element. For example, you could use class="col-sm-10 col-md-6" to specify 10 columns for small viewports and 6 columns for medium and large viewports.