[FIXED] What Bootstrap media queries width diff in pixel is increasing?

Issue

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;
  }
}

Solution

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:

• 1920×1080
• 1366×768
• 1536×864
• 1280×720
• 1440×900
• 1600×900

https://www.browserstack.com/guide/responsive-design-breakpoints

Answered By - bizlin

Answer Checked By - Cary Denson (PHPFixing Admin)