Edit on Codeply

Bootstrap 4 Breakpoint Test


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 **576 px**. 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 576px to 768px tier at the bottom. While the old 3.x `col-*` supported screen widths under 768 px, the new 4.x `col-*` tier supports screen width under 543 px. This new smaller `xs` tier means improved support portrait smartphones.