The grid system
The only change made in the Bootstrap 4 grid system is that a new extra-large breakpoint has been added. The class prefix for this breakpoint is .col-xl-. Here are the Bootstrap 4 grid breakpoints after this new addition:
The .col-xl- breakpoint targets screen sizes of 1200px or larger, which was targeted by .col-lg- in Bootstrap 3. Therefore, this makes other breakpoints compress to target smaller screen sizes than they used to in Bootstrap 3. Here, you can see that .col-xs- now targets a screen width of less than 544px instead of the 768px it did in Bootstrap 3, making it easier to target mobile devices and have different layouts for tablets and mobile devices, which was lacking in Bootstrap 3.
While Bootstrap uses em or rem for defining most sizes, px is used for grid breakpoints and container widths. This is because viewport width is in pixels and does not change with font size.
Here is an example of the new grid system. Place this code in the <body> tag of the index...
