1. Sass Instead of LESS
Until now Bootstrap has used LESS as its main CSS prepocessor, but for the new major release, the style rules will be refactored to Sass, which is much more popular among frontend developers, has a huge contributor base, generally easier to use and offers more possibilities. Thanks to the powerful Libsass Sass Complier written in C/C++ Bootstrap 4 will compile much faster than before.
2. New Grid Tier for Smaller Screens
Bootstrap has a sophisticated responsive grid system that allows developers to target devices with different viewports. Bootstrap 3 currently has 4 grid classes for columns, .col-xs-XX for mobile phones, .col-sm-XX for tablets, .col-md-XX for desktops, and .col-lg-XX for larger desktops. Bootstrap 4 will enhance the grid system with a fifth one that will facilitate developers to target smaller devices under 480px viewport width.
The new grid class has taken the name of the previous smallest one, and pushed the current names of the grid tiers upwards by one notch. In Bootstrap 4 the large desktops will use the .col-xl-XX class selector. It’s important to know that despite the new name they didn’t add a new class for extra large screens but for extra small ones.
3. Introduces Relative CSS Units
Bootstrap 4 finally drops the support for Internet Explorer 8. That’s really a smart step as it allows them to get rid of pesky polyfills, and convert to relative CSS units. Instead of pixels, the new major release will use REMs and EMs that make it possible to implement responsive typography on Bootstrap sites. This will also increase readability, and make sites more accessible for disabled users.
If you want to try out how relative units work with the new Bootstrap 4, check out this demo on Codepen.
4. Brand New Bootstrap Cards
The development team decided to unify some previous elements of Bootstrap’s user interface, so they decided to introduce a new UI component called Cards. Cards will replace the former wells, thumbnails and panels, and will provide users with a more streamlined workflow. Don’t worry, cards will keep familiar elements, such as titles, headers and footers of wells, thumbnails and panels.
As cards will be more flexible than the current UI components, they will allow a bigger space for creative implementations. There are some pioneers out there who have already conducted experiments on Codepen with Bootstrap Cards. You can check them out, or create your own cards.
5. New Reboot Module
The new Reboot module replaces the previous normalize.css reset file. It doesn’t ditch it; on the contrary, it builds more rules upon it. The goal of the move was to include all generic CSS selectors and reset styles in a single, easy-to-use SCSS file. You can take a look at the source code here if you want to better understand how the new module works.
It’s good to know that the new reset styles smartly set the box-sizing CSS property to border-box on the <html> element, which is therefore inherited by each child element on the page. The new style rule makes responsive layouts more manageable. If you want to experience the difference between the content-box and border-box layout types, take a look at this handy demo provided by CSS-Tricks.com (it wasn’t created for Bootstrap 4, it just shows how box-sizing generally works).
6. Opt-in Flexbox Support
Bootstrap 4 makes it possible to take leverage of CSS3’s Flexbox Layout, however – as Internet Explorer 9 doesn’t support the flexbox module – the default version of Bootstrap 4 rather makes use of the float and display CSS properties to implement a fluid layout.
Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way. Only use the opt-in flexbox feature if you don’t need to provide support for IE9.
7. Streamlined Variable Customization
All Sass variables used in the new Bootstrap release are included in a single file called _variables.scss, that will significantly streamline the development process. You don’t have to do anything else apart from copying the settings from this file into another one called _custom.scss to change the default values.
You can customize many things such as colours, spacing, link styles, typography, tables, grid breakpoints and containers, column number and gutter width, and many others.
8. New Utility Classes for Spacing
Bootstrap 3 already has many practical utility classes such as the ones that change floating or the clearfix, but Bootstrap 4 adds even more. The new spacing classes allow developers to quickly change paddings and margins on their sites.
The syntax for the new classes is quite straightforward, for example adding the .m-a-0 class links a style rule that sets margins to 0 on all sides of the given element (margin-all-0). While margins use the m- prefix, paddings are styled with the p- prefix. In the development docs you can take a look at all the new spacing utility classes.
9. Tooltips and Popovers Powered By Tether
In Bootstrap 4 tooltips and popovers makes use of the super cool Tether library, a positioning engine that makes it possible to keep an absolutely positioned element right next to another element on the same page. This means tooltips and popovers will be automatically placed properly on Bootstrap 4 websites.
Don’t forget that as Tether is a third party JavaScript library, you need to separately include it in the HTML before your bootstrap.js file.
10. Refactored JavaScript Plugins
The development team refactored each JavaScript plugin for the new release using EcmaScript 6. With the smart utilization of the latest specifications and the newest enhancements, they intend to improve the frontend experience.
The new Bootstrap 4 has also undergone through other JavaScript improvements, such as option type checking, generic teardown methods, and UMD support, that will all work together to make the most popular frontend framework run more smoothly than ever before.