Bootstrap: Bootstrap default breakpoints

[calspach]

Does anybody know how or why Bootstrap chose their default breakpoints? 768px, 992px and 1200px?

I understand 768px because the iPad display width is 768 pixels/points. But why 992px and 1200px? I like the breakpoints, I am just trying to find out why bootstrap came up with these in particular?

Thanks!

[mdo]

The specific values come from taking our grid container widths and accounting for some padding on either side for the closest screen resolution. Remember, these are viewport dimensions, so 992px is for 1024px wide screens and 1200px is for 1280px wide screens.

[calspach]

Thank you very much for the reply.

I understand your comment on grid container widths. I guess my question is.... how did you even decide on 768, 992 and 1200? Why not lower widths (that fit into the grid container widths)? Or higher? Why not just 768, 992... and not 1200?

Did you look at browser usage and make a educated decision as a group on... what a good mobile - to - tablet breakpoint would be (768).... a good tablet - to - desktop would be (992)? And since browser resolutions are getting larger and larger... (1200)? I am trying to understand why you picked these numbers.

The reason I am so specific with my questioning is.... the company I work for is going to use Bootstrap. Our team just wants to know... how did you guys even think of the numbers 768, 992 and 1200?

Thank you very much. I really appreciate it.
Chad
:-)

[mdo]

You've asked it a few times now, and I think I answered it already:

Remember, these are viewport dimensions, so 992px is for 1024px wide screens and 1200px is for 1280px wide screens.

We took some common horizontal viewport dimensions—1024x768, 1280x1024, etc—and made them our responsive break points. These breakpoints fit nicely with our grid—which has separate tiers at 750px, 970px, and 1170px.

Again, 768px is the horizontal width of an iPad. 992px is just under 1024px (the height of an iPad) to account for scrollbars on older laptops (which are usually around 20px wide). Similarly, 1200px is just under a common resolution width of 1280px.

[calspach]

Excellent...... this is what I was looking for.....

"Again, 768px is the horizontal width of an iPad. 992px is just under 1024px (the height of an iPad) to account for scrollbars on older laptops (which are usually around 20px wide). Similarly, 1200px is just under a common resolution width of 1280px."

I didn't see you mention this info.. but sorry if you did.

Thank you very much.
Chad Alspach

[seh]

Is the assumption here that people use their Web browsers at full-screen width? Considering the monitor width as implying the window width penalizes people with monitors wide enough to accommodate multiple windows next to each other horizontally.

[patrickhlauke]

How do the current breakpoints _penalize_ these users? What problem do they create?

[seh]

In some cases, they cause the layout to break incorrectly, forcing the user to expand the browser window until it crosses the next width threshold. Perhaps that's due to incorrect _use_ or _application_ of the layout framework, and not the framework's fault for choosing these thresholds.

[patrickhlauke]

Indeed. If the layout breaks at a certain breakpoint, it will also be broken on tablet/phone/whatever devices that the breakpoints are based on. So likely an issue of the developer, not framework

[H3xx3n]

As my experience, 992 should be lowered to ~940 as for splitting a full hd monitor at 50% would make 2 desktop views.
Today most of the websites run on ipad version with half window screen and this is a productivity problem just for few pixels as ipad sites often have less features.

[michaeloxborrow]

If bootstrap were to consider breakpoints larger than 1200px what might they be? I'm using Isotope js to create an image grid which is 5 images per row at 1200. These images lose their definition considerably on a 1920px monitor so I'd rather have 8 images in a row.

[michaeloxborrow]

I realise custom grids have nothing to do with Bootstrap but it would be useful/great to get some expert advice so that I can create some new breakpoints, i.e. XXL, XXXL.