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 Devices:Bootstrap supports the all major mobile platform’s default browsers instead of proxy browsers.Improved New Grid SystemComparing with 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. For typography responsiveness and sizing of components pixels have been moved to “rems”. Like previous versions, this grid is made up of 3 things.ContainerRowColumnsWhen we nesting, we need above three things. The Container is already defined. Therefore 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 magic 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:

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 the float, which means it is going to reduce the browser and device support.For some number of component, they have enabled 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.In this new version, pixel units change into rem/em based units. It lays on the 16 pixels of a base font size. This is how rems/ems converted into pixels.Unlike the bootstrap 3, the new grid has 5 breakpoints.

It has min and max widths, Which are;//For Extra small devices (smartphones, less than 34em)@media (max-width: 33.9em) { }// For Small devices (phones, tablets less than 48em)@media (max-width: 47.9em) {} // For Medium devices (tablets, small laptops less than 62em)@media (max-width: 61.9em) { } // For Large devices (desktops, screens less than 75em)@media (max-width: 74.9em) { }Utility ClassesThere are some utility classes introduced to this version to display components on a preferred viewport of a device.

Below are is the summary of utility classes.Along with this they have introduced new print classes to toggle the content for print as well.CardsCards are a new component that introduced for bootstrap 4 version. They have dropped wells, thumbnails, and panels for this.

Card is a box that has a padding to its content which is built with FlexBox. It can include optionally headers, footers, content, colors, etc. Users have to use spacing utilities because it has no margins.

Sass Variables for CustomizingLike previous versions, bootstrap 4 doesn’t have a special theming style sheet. By enabling the built-in theme, users can add gradients, shadows, and many more. Remember to keep a separate stylesheet to import Bootstrap’s source Sass files.Eg: @import “node_modules/bootstrap/scss/bootstrap”;With this setup you can modify/add any Sass variables and map to your custom stylesheet.In this new Bootstrap 4, variables have a “!default” flag, that shows you can override the default values without touch the core source code.

Simply you have to do is copy and paste any needed variables into your custom stylesheet and do the changes on that. When overriding across Sass files, your overrides must come before you import Bootstrap 4 Sass files.JavaScript ImprovementsThis new Bootstrap 4 plugins written in ES6 (ECMAScript 6) and compiled by babble. Therefore it will be very easy to maintain and also comes with UMD and AMD support, Option Type Checking, teardown methods and many more.Added Tether to TooltipsTether is a client-side Javascript library to make absolutely positioned elements attach to elements in the page efficiently.

Tether is developed by a team of HubSpot. If you want to add Tether to your project you have to include tether.js to work.