Bootstrap 4 Breakpoint Test

pixels (~ em)

xl lg md sm xs

This is a screen width test for Bootstrap 4 to demonstrate various widths and orientations, and see the targeted devices.

Bootstrap 4 introduces a new grid breakpoint with the `col-xl-*` classes. This extra tier extends the media query range all the way down to **543 px** (or **34 em** based on the new sizing). Eventhough the new `XL` tier would make one think it's been added to support extra large screens, it's actually the *opposite*. All the 3.x tiers slide up in 4.x, to fit in the new 543px to 768px tier at the bottom. While the old 3.x `col-xs-*` supported screen widths under 768 px, the new 4.x `col-xs-*` tier supports screen width under 543 px. This new smaller `xs` tier means improved support portrait smartphones.