Browsers tall as the column with the

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 has become flexbox by default. That means we cannot enable or disable using the sass variable $enable-flex. 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 1200px)This 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 version 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 have 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.

Nested Column

Automatic LayoutOne of a cool new feature is the auto-layout mode. It automatically distribute the space in a row.

block 1

block 2

block 3

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 a 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 amount 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-*”

This will be automatically centered.

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:

Top

Middle

Bottom

How to align individual columns within the row:

Top

Middle

Bottom

Columns ReorderingUnlike the Bootstrap 3 “ push” and “ Pull”, This version they have implemented thee ordering classes can apply without any manual calculations.

flex-first – Displayed first. flex-last – Displayed last. flex-unordered – Displayed between first and last. Opt-in FlexBox Bootstrap 4 gridIn this new Bootstrap 4, the FlexBox is enabled by default. If you don’t want to use it you can disable it by yourself.

With this new collaboration, it will increase the flexibility to arrange the elements and has been moved away from float. Enabling flexbox means reduced browser and device support. For some number of component they have enable this flexbox. The whole grid system (mixins and predefined classes), which switch from floats to display: flex;. The media component moves from display: table; and a number of hacky styles to a simple display: flex;. Input groups, which move from display: table; to display: flex;. Improved Media QueriesIn Bootstrap 4 with SAAS, we have to write the source CSS in SASS therefore, each and every media queries are available via SASS mixins as shown below. In this new version of bootstrap pixel based units moved to relative em/rem based units which has the base font-size of 16 pixels.