Bootstrap celebrated its 4th birthday on August 19. To congratulate the framework community on such a joyous occasion, the company made an alpha release of Bootstrap 4. If your web projects are powered by this framework, read our post to find out how you can update them. At its end, there is also a little surprise for you from Bootstrap developers.
As a short foreword, we’d like to mention that the alpha version of Bootstrap is still incomplete. For that reason, you shouldn’t use it for your projects straight away. However, it can give a clear insight into the cool stuff that will become available to you soon. As it may be quite challenging to dig into each Bootstrap feature, our overview highlights its major peculiarities. So, read on to check what’s new in Bootstrap 4.
Move to LibSass
Bootstrap codebase was moved from Less to LibSass. As a result of this move, the new version of the framework is compiled much faster than its predecessors.
Better Grid System
To improve the grid system, a new tier was added to it, which allows targeting users of mobile devices more than ever. Semantic mixins also underwent a total overhaul. Now, you can get necessary mixins in any place out of the box.
Flexbox Support
Support for Flexbox is also among Bootstrap 4 new features. This is a flexible box layout model capable of arranging elements in a way that fits the viewport. You can easily utilize a Flexbox-based grid system and its components by switching a boolean variable and recompiling CSS.
Cards Addition
In the alpha release of Bootstrap 4, cards took the place of wells, thumbnails and panels. Although these components are new, they will still feel quite familiar to you. In fact, cards perform the same functions as wells, thumbnails and panels, but they do their job much better.
Reboot Module
All the HTML resets were merged into a brand new module dubbed Reboot. Compared to Normalize.css, it provides more opinionated resets included to a single CSS file.
Customization Options
Gradients, transitions, shadows and other styling options were embedded into Sass variables. You can enable these options through the variable update and recompilation.
No Support for IE8
Bootstrap 4 doesn’t support IE8, which can set you free from CSS hacks and fallbacks and help you make the most of CSS. However, those of you who still need IE8 support should stay with Bootstrap 3.
Rems & Ems
Instead of pixels, the new framework version utilizes rems and ems. These units are more favorable for responsive typography and facilitate the process of resizing components.
Plugins Rebuilt in ES6
To make maximum use of the latest JavaScript tricks, all the plugins were rebuilt in ES6. In such a way, you will have an access to generic teardown methods, UMD support, option type checking, and other options.
Tooltips & Popovers Improvement
Automatic placement of tooltips and popover elements were improved by means of a JavaScript library dubbed Tether.
Rewritten Docs
Completely rewritten in Markdown, the documentation of Bootstrap 4 is much easier to use. There are also several convenient plugins meant to enhance examples and code snippets. Soon, you will also get an access to an upgraded search option.
What’s More
In fact, Bootstrap 4 offers much more to users besides the above-mentioned features. New utility classes, handy form controls, margin and padding classes, - these and other options will become at your hand if you update the current Bootstrap version to its latest one.
Plans for the Near Future
At present, Bootstrap 4 features around 1.100 commits and 120.000 lines of updates, but the work has been finished yet. Check below what else you can expect to see soon:
- a few more alpha releases;
- 2 beta releases after deciding on functionalities and testing them;
- 2 RCs (release candidates) to test the framework’s work in the production environment;
- the final release.
Bootstrap 3 Support
Although Bootstrap developers stopped supporting the 2nd version of the framework, things won’t be the same with the 3rd one. Fans of Bootstrap 3 can keep on using their favorite version, as it will be fully supported. Its documentation won’t only remain available after the launch of the 4th version, but will also be improved. Furthermore, the team is planning to release critical bug fixes for Bootstrap 3.
Official Bootstrap Themes
Apart from the release of the 4th framework version, the team behind Bootstrap has another surprise for their community. They have created 3 themes powered by Bootstrap 3, namely Dashboard, Application and Marketing. The themes are not just ordinary Bootstrap re-skins, but are full-featured toolkits like the framework itself. In addition to the contents of Bootstrap, each of them comes with extra plugins, components, custom docs, and cool real world examples. Licensed for multiple use, the themes provide lifetime updates for free.
Over 4 years, this responsive framework has undergone multiple changes, and the alpha release of Bootstrap 4 looks worthy to try, doesn’t it? So, what are you waiting for? Click here and give it a try!
Also we would recommend you to review our Bootstrap Admin Themes built with Bootstrap functionality.