Browsers and devicesBrowsers:With this new Bootstrap 4.0 release, they have stopped the Internet Explorer 8, Internet Explorer 9 and IOS 6 support, because this version comes with flexbox by default. Apart from these, it is support for all stable and latest releases. If you like to have the old browsers, you can keep using the Bootstrap 3 version. Mobile DevicesBootstrap supports for the all major mobile platform’s default browsers instead of proxy browsers.Improved New Grid SystemComparing to the version3, Bootstrap 4 has 5 grid tier system..col-** extra small devices – screen width less than 576px.col-sm-** small devices – screen width equal to or greater than 576px.col-md-** medium devices – screen width equal to or greater than 768px.col-lg-** large devices – screen width equal to or greater than 992px.col-xl-** extra large devices – screen width equal to or greater than 1200pxThis Bootstrap 4 version has removed the lowest breakpoint “xs” and covering all devices by “col-” class. To make typography responsive and component sizing even easier pixels have been swapped for “rems”. Like previous versions, this grid is made up of 3 things.ContainerRowColumnsWhen we nesting, we need above three things. The difference is that container is already defined. Because of that, columns will behave like the container in the nested grid.Here how it works, Containers have left and right 15px padding. Then we define a column that again has 15px padding on left and right, therefore to nest a column inside of a container, we simply wrap the column with a row to nullify the extra padding of the column.
Automatic LayoutOne of a cool new feature is the auto-layout mode. It automatically distributes the space in a row.
In the above code, Sizeless columns share the available space equally. It will always fill-up the entire row.Column HeightsThe previous grid system was built on floated elements. Because of that, every column has different column heights, depending on the content height. In this flexbox based layout, every cell in a row aligned to be as tall as the column with the most content.Horizontal AlignmentIn Bootstrap 4 they have given a majic property called “justify-content-*” for positioning columns horizontally. No need to manually adjust the number of spaces like bootstrap 3 col-*-offset -* element. If you want to continue the same offset you can still do that as well. But those classes are now shortened to “.offset-xs-*”
Vertical AlignmentWith the support of the flexbox Bootstrap 4 allowing us to vertically align the whole row and individual columns within the row.How to vertically align the whole row:
How to align individual columns within the row: