I want to add XXL and XXXL break points in bootstrap 4.x
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
);
I know I need to also set the $container-max-widths, but I am not sure what the math is. I think it has something to do with the 30px margin. What is the math to calculate that and/or what is the numbers I should use for XXL and XXXL
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: ????,
xxxl: ????
)
Why is it 720 for 768? What I really want to know is what do I put in for XXL(1440) and XXXL(1600)?
When calculating the container widths they ensure that all widths are divisible by 12 as per the comments in this blame. https://github.com/twbs/bootstrap/blame/dd539094ea6722489c5ba940523691edc556b6a3/scss/_variables.scss
Here is the commit that mentions the divisible by 12 requirement https://github.com/twbs/bootstrap/commit/0ba0f19003b8d118801fca94dcacc908fd4ddd70
They also all appear to be divisbile by 10 and at least the 30px less than the grid breakpoint.
Following that pattern the values would be
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1380px,
xxxl: 1560px
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With