Query:
I am working with Bootstrap v4 in a project and I am curious about the connection between the default values assigned to the keys in the $container-max-width and $grid-breakpoint SASS maps. Is there a correlation between them in Bootstrap v4?
Background:
While customizing the grid system of Bootstrap v4, it is straightforward to modify the variables that control its functionality. However, when examining the default values to understand what to set the new variables to, I noticed that the relationship between the xl values in the $grid-breakpoints and $container-max-widths maps is intertwined with the $grid-gutter-width-base value like this:
(2 * $grid-gutter-width-base) + map-get($container-max-widths, xl) == map-get($grid-breakpoints, xl)
However, this equation seems applicable only to the xl values. I wonder if there is a deeper inherent relationship between the values of $container-max-widths, $grid-breakpoints, and $grid-gutter-width-base that I am overlooking, as apart from the xl level, they appear to be arbitrary.
Could there be an underlying connection between these values, or is the mathematical relationship at the xl level merely coincidental?