The grid is 15 columns with a 21 px gutter that matches the body text font size. The grid applies the gutter to either side of the column. The container is centrally aligned to the viewport.
|Extra Large||960 px|
At the lg breakpoint 862 px the grid splits into two fields of 4 columns and 10 columns. The second field is offset by one column.
Spacing is derived from the line-height of body text which is 32 px. This is extrapolated in a scale to make use of Bootstrap’s SASS map.
|Scale||Size||Ratio to line-height|
|4||48 px||One and a half|
|7||256 px||Eight times|
The container is centred using auto margin. Nothing novel. The main text block applies a technique derived from book layout whereby the the page margins are in proportion to each other.
The bottom margin is twice that of the top margin using the vertical spacing units
.mt-7. At the moment this margin is fixed at all breakpoints.