Bootstrap 4: 11 New Compelling Features You’ll Love to Use
In recent years, Bootstrap has evolved from a basic non-responsive framework to a fully-fledged modern responsive framework. Originally developed by former Twitter employees Jacob Thornton and Mark Otto, Bootstrap is now being used by a number of reputable companies – including Spotify, Nasa, Osmo and LiveRamp.
Around a month ago, the company released the second Alpha version of Bootstrap 4. Even if the shiny new version of the world’s most popular front-end framework is still under-development, it gives us insight into all the new cool changes and features that you’ll see in the final stable release.
Let’s take a look at what Bootstrap 4 will bring to us!
#Moved from LESS to SASS:
The most revolutionary change in Bootstrap 4 is switching from LESS to SASS. Until version 3.x, Bootstrap has been using LESS, but from the new version, the framework will use SASS as its main CSS preprocessor. The key reason behind this change is that SASS compiles things much faster as compared to LESS. As a result, Bootstrap 4 will be faster than its predecessors.
#Enhanced Grid System:
To let you better target mobile devices of viewport width 480px or less, a new dynamic tier is added to the grid system of the framework. In Bootstrap 4, mobile devices under 480px viewport width will use the .col-xs-XX class selector, while large screen devices will make use of the .col-xl-XX class selector. Moreover, media queries will now be defined in em instead of px to facilitate easier scaling across different screen sizes.
#Say Hello to Cards:
Bootstrap 4 introduces a new unified UI element called Cards, which will replace Bootstrap 3’s old panels, wells, and thumbnails components in order to provide users a more streamlined development workflow. Think of them like an extensible and flexible content container that allows you to easily create different types of elements like headers, footers, contextual background colors and more.
#Added Support for Opt-in Flexbox:
Optional support for Flexbox is another great improvement made to Bootstrap. Now simply by setting a single Boolean variable $enable-flex to true inside the .scss file and re-compiling the CSS file, you can turn all grid components into the Flexbox mode. Since the Flexbox module is not supported by Internet Explorer 9, use this feature only if you don’t need to provide IE9 support.
#A New Reset Component: Reboot.css
Built on the top of the traditional normalize.css, Bootstrap’s new reboot module combines all generic CSS selectors and basic styling into a single easy-to-use SCSS file called reboot.css. Unlike normalize.css, reboot.css offers developers more opinionated resets – like box-sizing: border-box, body {background-color: #FFF} and more – in a single Sass file. In other words, the reboot.css builds more rules upon normalize.css.
#More Customization Options:
Bootstrap 4 makes it easier for developers to create custom designs, absolutely without having a separate style sheet like version 3. That’s because the development team has consolidated all the variable options into a single file called _variables.scss, which lets you customize things such as grid breakpoints, colors, tables and tables with little effort. All you need to do is to update a variable and then recompile.
#Dropped IE8 Support:
To help you get rid of pesky poly fills and let you make the most of CSS3, the core team finally decided to completely drop the support for Internet Explorer 8. This smart step is taken because IE8 doesn’t support media queries, which play a vital role in incorporating responsive design into the framework. However, if you still need IE8 support, you’re free to use Bootstrap 3.
#Rewrite of All JavaScript Plugins:
Every JavaScript plug-in has been rewritten in EcmaScript 6 (ES6) so that you could make the most of latest JavaScript specifications and enhancements. The main purpose behind this course of action is to improve the overall frontend experience for developers. Although you might notice some plug-ins (such as the affix plug-in) are removed but in fact, the framework is more powerful than ever before with new UMD support, option type checking, generic teardown methods and more.
#New Interactive Documentation:
Since the documentation for Bootstrap 4 has been completely rewritten in Markdown, it’s much easier to navigate, search and use. By breaking down features into components, content and layout, the new documentation presents information in a very structured and logical manner. Best of all, each component in the new documentation has its own page. Other than that, the brand new search form makes searching easier for developers.
#A 30% Smaller Footprint:
Believe it or not, Bootstrap 4 has 30% smaller file size than the latest Bootstrap 3 build. Previously, it was around ~123KB and now it is mere ~88KB, which is really a huge reduction. Honestly speaking, getting a smaller footprint without losing any feature is a great achievement for the Bootstrap development team. Furthermore, if you want to make the file size even smaller, use only the features of Bootstrap that you really need.
#New Quick Start Options:
Bootstrap 4 offers you a whole bunch of new quick start options, each one requiring a different skill level and use case. However, the way you choose to integrate Bootstrap with your web application depends on what suits your particular needs. Some of the new ways to quickly get started are:
- Git: Just clone the repo and you’re good to go! git clone https://github.com/twbs/bootstrap.git
- Meteor: You can install it via Meteor – a popular JavaScript app platform. meteor add twbs:bootstrap
- NuGet: And you can install it via the NuGet package manager.
- CSS: Install-Package bootstrap –Pre
- Sass: Install-Package bootstrap.sass –Pre
Note: -Pre is only required until the stable release of Bootstrap 4.
Published By: WordPressIntegration Team – Place your order now for our PSD to Responsive WordPress service, you may contact us via our contact form for any query.
