Grid
Columns
Bootstrap uses a mobile first grid system that spans over 12 columns as the device and viewport size increase, making it fluidly responsive (please download the Bootstrap 4 library). However, when the page has a left menu (3 columns wide), the other 9 columns are redistributed in 12.
Margins
Gutter
Each gutter on the grid measures 30 pixels in width, or 15 pixels on the side of each column, whether the grid covers the 12 standard columns, or whether the 12 columns are deconstructed into part of the basic grid.
Breakpoints
These breakpoints describe column and width specifications for different screens, devices and orientations.
For some measurements, the values remain the same even if a device is rotated. For that reason, the smallest width in either orientation is the defining value.
| Breakpoints | Value (px/rem) | Columns | Size | Gutter |
| Extra small <576px |
320 / 20 | 12 | 30px (15px on each side of a column) | |
| Small ≥576px |
320 / 20 | 12 | 30px (15px on each side of a column) | |
| Medium ≥768px |
320 / 20 | 12 | 30px (15px on each side of a column) | |
| Large ≥992px |
320 / 20 | 12 | 30px (15px on each side of a column) | |
| Extra large ≥1200px |
320 / 20 | 12 | 30px (15px on each side of a column) |
A UI may reflow into available space. Elements from a single-column format may reflow to fill the content area in various combinations.
Grid behaviors
Fluid columns
Fixed columns
8pt grid and visual rhythm
The 8px grid
Best practices
Do
Do not
Column layout and text
Best practices
- Page layouts are created using bootstrap through rows and columns.
- Rows are to be placed in a .container (fixed-width) or .container-fluid (full-width) to ensure proper alignments and paddings
- Rows are used to create horizontal groups of columns
- Content is to be placed in columns
- Columns are direct children of the rows
- Pre-defined classes such as .row and .col-12 are used to make quick grid layouts
- Grid columns are created by specifying the number of 12 available columns to utilize for a given layout
- Grid classes such as .col-lg-4 will target and affect medium devices but also larger than md devices in the same way
- Pre-defined bootstrap and custom classes are to be used to ensure a conformity in the code. The CSS stylesheet currently in use will be conveyed in due time