Bootstrap 4 also adds Flexbox and ES6 support

Aug 21, 2015 12:20 GMT  ·  By

The Bootstrap frontend UI framework has reached version 4.x, and its creator, Mark Otto, has timed its release for the same day as its fourth birthday.

As with every major version, Bootstrap 4.x comes with a huge amount of changes. While 3.x was visually and code-wise different from 2.x, this time around, 4.x didn't make severe changes to the UI, but everything is now different under the hood.

While previous versions of Bootstrap were written in Less, the team has now changed to Sass, another CSS pre-processor, very similar, but with a larger userbase, more third-party tools, and a super-fast compiler written in C, Libsass.

A new grid system and Flexbox support

But these are not all the changes the team had in store. According to Mark Otto, "Bootstrap 4 has been a massive undertaking that touches nearly every line of code."

This has resulted in a brand-new grid system, one that targets mobile devices first, and one that can easily be switched to a Flexbox-based grid whenever desired.

Besides the grid system, Flexbox is also used for some UI components as well, providing developers with simpler and more efficient responsive elements.

Card-based UI elements are here

Since we brought up UI elements, it is essential to mention there will be no more thumbnails, panels, and wells in Bootstrap 4, these being replaced with "cards," an UI element Google has been pushing in its user interfaces for some years now, especially since it launched the Material Design guidelines 15 months ago.

Other changes include new Sass variables for making quick customizations to gradients, shadows, and transitions; better placement for tooltip and popover elements; and a new HTML reset module called Reboot, which builds on what normalize.css already brings to the table.

No more IE8 support

Since the Web is constantly moving forward, the Bootstrap team has announced they won't support IE8 anymore, which means the codebase is now much lighter, being freed from all the hacks and fallbacks needed to support that "epic fail" software Microsoft liked to call a "browser."

Additionally, all the JavaScript plugins have been rewritten in ES6 and come with built-in UMD support, making the Bootstrap JS codebase compatible with the latest version of the JavaScript language.

All of these and much more amass to 1,100 commits and 120,000 lines of changed code, Bootstrap developers managing to cut down the framework's CSS file size from ~123kb to ~88kb.

Bootstrap can be downloaded from Softpedia or via GitHub.