The New Awesome Features in Bootstrap 4

Are you using Bootstrap, the world’s most widely-used front-end framework? Although the new version 4 is quite new, there is no reason not to use it and take advantage of its new awesome features! See for yourself what has been added, what has been disposed of and how you can take advantage of it all.

The version 4 is a major rewrite of the entire framework. It comes packed with significant improvements and you should consider many of the changes should you decide to migrate your project to it. Let us take a look at the main points.

Bootstrap 4

Take Advantage of Flexbox

The Flexbox grid system has been added by default which also marks the removal of the float-based styles. It doesn’t come as a surprise since Flexbox is already widely-supported by all major browsers. It does offer more flexibility than floats and comes with a range of new options like the automatic resizing of all the child elements of a div.

From Less to Sass

Less has been removed and Sass came to replace it as the framework’s main preprocessor. This is an important and logical change since Sass is favored by the majority of web developers. Thanks to Libsass, it also compiles faster. If you download the source code of Bootstrap, you will notice the Sass folder. It comes will all the needed partials. All the variables with which you can change the default layout are listed in the variables.scss file. Bootstrap.scss, on the other hand, contains all import directives needed to customize your instance of Bootstrap, allowing you to add or exclude the features you may or may not need.

The new REM units

Although many people have been using those for years and long before the introduction of Bootstrap 4, their introduction in the framework makes things more scalable for web designers and developers. Rem stands for “root em” which means that the sizing of elements is relative to the root or the outermost element. If you want to know more on the subject, take a look at this article.

Changes in Browser Support

Favoring Flexbox over float-based layouts comes with changes in browser support inevitably. Support for IE 8 and 9 has been dropped. It is worth taking note that only browsers supporting IE 10 and the browsers introduced after it will support Bootstrap 4. This is well over 97% of the cases so it shouldn’t be a big problem.

A New Reset File

The new Reboot replaces the Normalizer’s resets to provide a consistent and elegant, yet simple baseline to build upon.  For optimal text rendering on different devices, the default web fonts such as Helvetica Neue, Helvetica and Arial have been removed in favor of a more native font stack.

The Introduction of an Additional Breakpoint
The Bootstrap’s responsiveness introduces a fifth breakpoint to increase the level of possible customizations when addressing devices of different screen width. These are as follows:

xs: 0px,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px

No More Glyphicons
These are no longer supported, and you will need to look for your own substitute for web font icons. Although there are many choices for someone to choose from, such as Octicons and Iconic, people most often go for Font Awesome.

Grunt Task Runner has been Removed
The later Bootstrap versions used the Grunt task runner to optimize some common tasks. This is no longer the case. The package.json file now comes with the most necessary npm scripts allowing you to watch Sass files for changes, run JS tests and compile a version of your site for distribution.

Although there are many other minor changes to accompany the aforementioned ones, these aren’t as notable. If you want to know more about the changes already introduced to Bootstrap 4 and those that are about to be introduced in the near future, it is advisable that you follow the migration section of the Bootstrap documentation.