Bootstrap is the most popular open source client-side web design framework used for creating web applications and websites. In the last four years, Bootstrap released three versions and from time to time it is upgrading with the new course of web components for better usability. On its fourth anniversary, 19th Aug. 2015, Bootstrap announced the release of version 4 alpha release and on 27th Jul. 2016, Bootstrap 4 alpha 3 was released. There are many changes and improvements in the new version of Bootstrap.
New Features
- Brand New Bootstrap Cards
Cards have been introduced to unify some of the previous elements such as panels, wells, and thumbnails. It is an extensible and flexible content container. It includes options for a wide variety of content, headers and footers, powerful display options, and contextual background colors. Cards are more flexible and allow a bigger space for creative implements. - Opt-in Flexbox Support
In the newer version of Bootstrap, you can take advantage of CSS3’s Flexbox Layout. Flexbox layouts are adaptable and can be well utilized in the responsive design. It presents an elastic container which fills the available space either by expanding or shrinking itself to the most proficient way.
IE 9 users, please note that Flexbox does not support version 9. Hence the default version of Bootstrap 4 uses float and display CSS properties for the implementation of a fluid layout. - Relative CSS Units
As a significant move to streamline the CSS -Bootstrap 4 dropped support for the IE8 browser. The new release uses REMs and EMs which enables implementation of responsive typography on Bootstrap sites. It also improves readability and improvement in accessibility for physically challenged users. - Handy Utilities
Various useful helper classes have been added such as margin and padding, and text helpers. Also, there are responsive and contextual colors helper classes to hide content on particular breakpoints.
Significant Changes
- Improved Grid System
Bootstrap’s fluid grid system allows programmers to focus various devices having different viewports. At present Bootstrap 3.x grid system offers 4 classes to define different size columns. Bootstrap 4 improves the fluid grid mechanism with a 5th one which facilitates programmers to aim for small devices having a viewport of 480 px or lesser than that. - Completely Redesigned Navbar
The new Navbar is simpler. You can toggle it using the Collapse component, the `.navbar-toggleable-xs`, `.navbar-toggleable-sm`, etc.. let you control the breakpoint. Here’s an example. - Fonts are Bigger
In Bootstrap 4, the default font size which was earlier 14px is now changed to 16px. Also, a new large display for headings which makes text stand out. - Tether powers tooltips and Popovers
Tether, a JavaScript library, offers the position of an absolute positioned element stay next to each other on a web page. The power of Tether will enable automatic placement of tooltips and popovers. Note that it is a 3rd party library which supports IE9+, needs to be included separately in your HTML before adding the bootstrap.js. - A New Approach to Global Theming
It will be the most interesting change. At present, with the version 3.x, it is very hard to do changes in RAW CSS, LESS file and overriding the settings. Easy customization of the global theme is expected in the new version.
RIP
- Rearranged Support for IE
The newer version has dropped support for IE8 as it was not supporting CSS media queries. IE 9 does not support Flexbox. To support IE9 Bootstrap has made Flexbox as optional to integrate with the framework. - Glyphicons Dropped
Glyphicons, which was used by many, has been removed. The alternative provided is to use Font Awesome and Octicons as third party components. Instructions will be included eventually in the documentation.
Changes Behind the Scene
- Bye Bye LESS, Hello SAAS
As compare to LESS, SASS is more popular among frontend developers. SASS is easier to use, offers more possibilities and has an immense community base. - Refactored JavaScript Plugins
All JavaScript plugins now are rewritten in ECMAScript 6 to take the benefit of the latest specification to improve the frontend experience. - Optimized Variable Customization
Now all the Sass variables are incorporated into one single file named _variables.scss. This makes customization very easy. To change the default values, one needs to copy the settings into another file named _custom.scss. - New Reset Component Called Reboot
The Reboot module now replaces the normalize.css file. The new module is the enhanced version of the normalize.css with the goal to include generic style and selectors within a single and easy to use.SCSS file. This change enabled the user to override the default setting in a better way without using ‘!important’.
This article is based on Bootstrap 4 alpha 3 version. For latest updates, visit the official blog.