Bootstrap 4 grid tips

[mhulse]

/*

Tips:

1.
Due to how units are calculated for breakpoints, use `px` unit for grid
gutters and breakpoints (others?).

2.
When working with Bootstrap 4 grids, the parent’s `container` and `container-fluid`
are required if you are not already in a container that has `15px` of left/right
padding. When not using these containers, you may run into situations where
a horizontal scrollbar will appear due to negative margins of columns.

3.
For the Bootstrap grid, use `.no-gutters` class on `.row` to remove gutters.

4.
Out-of-the-box breakpoints (in pixels) are:

- xs, < 576
- sm, 576+
- md, 768+
- lg, 992+
- xl, 1200+

*/

/* Flush columns to parent container (so you don’t have to use container divs): */
.row {
    margin-left: -10px;
    margin-right: 0;
}
.row > [class^="col"] {
    padding-left: 10px;
    padding-right: 0;
}

/* I want rows to have same vertical spacing as their gutters: */
.row + .row {
    margin-top: 10px;
}

[mhulse]

Another (improved?) variation:

/*

Tips:

1.
Due to how units are calculated for breakpoints, use `px` unit for grid
gutters and breakpoints (others?).

2.
When working with Bootstrap 4 grids, the parent’s `container` and `container-fluid`
are required if you are not already in a container that has `15px` of left/right
padding. When not using these containers, you may run into situations where
a horizontal scrollbar will appear due to negative margins of columns.

3.
For the Bootstrap grid, use `.gutters` class on `.row` to add gutters.

4.
Out-of-the-box breakpoints (in pixels) are:

    - xs, < 576
    - sm, 576+
    - md, 768+
    - lg, 992+
    - xl, 1200+

*/

/* Remove gutters (now gutterless by default): */
.row {
    margin: 0;
}
.row > [class^="col"] {
    padding: 0;
}

/* Add utility class for gutters: */
.row.gutters {
    margin: -10px -10px 0 -10px;
}
.row.gutters > .col,
.row.gutters > [class*="col-"] {
    padding: 10px 10px 0 10px;
}

/* https://github.com/twbs/bootstrap/pull/25255 */
[class^="col"] {
    position: static;
}

/* Add spacing between rows, if gutter applied: */
.row.gutters + .row {
    padding-top: 10px;
}

This allows for vertical spacing with a gutters class.