I need to go beyond these standard Bootstrap widths and don't want to pick random values. Trying to generate 1600px, 1800px, etc. values I noticed that the (min-width - max-width)
difference increases with width values.
What's behind this? Is there any width standard beyond 1400px I can copy from?
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
From Bootstrap's website:
"Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device."
( https://getbootstrap.com/docs/5.0/layout/breakpoints/ )
The most important part here is that the max-width is always easily divisible by 12.
This is because Bootstrap's grid system is based on 12 columns.
The standard values here for for max-width range from about 93%-97% of the width of the corresponding breakpoint.
For example 1140px is 95% of 1200px.
Keeping that in mind if you wanted to set a breakpoint at 1600px, you could set the max-width to be 1500px.
1500px is divisible by 12 and is 93.75% of 1600px, which falls in line with the range of widths of the other breakpoints.
Similarly for 1800px you could set the max-width to 1680px. 1680px is divisible by 12 and is 93.33% of 1800px.
Those numbers are arbitrary at this point, other than making sure the max-width is divisible by 12.
If you're looking for some specific numbers to go by for breakpoints, here's a list of the most commonly used desktop sizes in 2022, according to BrowserStack:
https://www.browserstack.com/guide/responsive-design-breakpoints