Question:
Is there a relationship between the default values assigned to the keys in the $container-max-width
and $grid-breakpoint
sass maps in Bootstrap v4?
Context:
I'm using Bootstrap v4 for a project and I'm looking at making some minor adjustments to the grid that it uses. It's trivial to set new values to the variables which control how all of that works, but when I look at the default values to try and get an idea of what I should be setting those new variables to, it appears that the xl
values in the $grid-breakpoints
& $container-max-widths
maps are related via the $grid-gutter-width-base
value like so:
(2 * $grid-gutter-width-base) + map-get($container-max-widths, xl) == map-get($grid-breakpoints, xl)
...but this is only true for the xl
values.
I would think that the values of those 3 things ($container-max-widths
, $grid-breakpoints
& ,$grid-gutter-width-base
) would have to be inherently related somehow, but other than at the xl
level, they all seem completely arbitrary.
Is there some sort of relationship between these (or other values) that I'm missing? Is the mathematical relationship at the xl
level just a coincidence?