Bootstrap 4 Features: What’s new, What’s gone!

Finally, Bootstrap team announced first beta version of Bootstrap 4 on 10th August. Bootstrap, in a nutshell, it’s a widely popular open source front-end web design framework for creating websites and web-applications. After Four years of deadly support basically I think, it needs no proper introduction at all about how they still ensure the perfect environment for the bootstrap designers.

Especially in recent years, bootstrap stands for the mobile development and it helps developers to create or extend as well as build completely custom or prototype solid websites.

In the last 4 years, bootstrap released 3 versions and from time to time versions are upgrading with new course of web components for better usability. Bootstrap made its fourth anniversary by announcing the new path of outline with the alpha release of is Bootstrap 4 and Finally, they released first beta on 10th August. There’re lots of changes and reformation in the new version of bootstrap. Now I’m going to describe it, hope you might enjoy…..

New Documentation, New Hope

Yeah it’s like a hope to build something in care of new course materials. Just take a look in the part of bootstrap; the docs for Bootstrap have consistently been some kind like out of touch. For beginners, some of the time I don’t really know whether to look in the CSS or Javascript part.

Hopefully the new documentation of v4 comes with a fresh start. Although there is marginally quite different structure in which most of the features are broken down into components, content and layout.

But there is something I like the most in this new documentation that it has different page for each and every components, creating a simple link and tools to test the responsiveness of pages. Check the new Bootstrap 4 documentation from here.

Flexbox First

Bootstrap v4 just made the start for new future by adding Flexbox ingredient into the heart of this framework. Actually Flexbox is planned for shifting elements for different screen sizes, layouts and resolution. Flexbox support is only accessible to overall grid systems and input groups Flexbox provides proper alignment of webpage content within vertically in parent element based on equal height columns.

But there is some issues regarding with the flexbox support in Bootstrap v4. In Bootstrap v4, flexbox just initialize traditional float or display table methods under IE9 browser. Otherwise you can enable this up to IE10+ browser.

If you want to take the advantage of flexbox-based grid system, Just switch on the variable.scss file and find the Boolean variable $enable-flex, Then Change the boolean variable from false to true. Finally recompile the whole file and grid components will turn into Flexbox mode. Check this out here

Ta-ta Less, Hi Sass

In every version, Bootstrap shows its caliber on its own style. So now what? In upcoming Bootstrap 4, it kicks out it’s preprocessor less by adding Sass for its further development in frontend frameworks. Unlike the other variables, Sass would be considered as the most powerful front-end engine. That’s why all kinds of Customization options will from this time be handled as Sass variables.

After all in recent years sass has already created an enormous community of developers and listed as a faster development environment. By the way all thanks go to libsass for their great contribution in Sass revolution.

 

New Grid System

Bootstrap is always trying to create responsive site handier than before, that’s why new version of bootstrap 4 has added the new grid tier by aiming smaller devices (480px wide). Conversely this division has made an impact on the name of its previous class (.col-xs-XX). For this reason all kinds of grid tiers moving little bit upwards by creating new large tier called (.col-xl-XX).

According to the newly grid system, There is some issues underneath with container components. Based on the new bootstrap 4, container will be used for giving the fixed width and container-fluid could be used for maintaining the full-width rows. So gird tiers are standing by the name of extra-small, small, medium, large, extra-large and others are most provably depends on the minimum width.

 

Reboot.scss: the rise of new reset component

In bootstrap 3, Normalize.css was popularly acclaimed and widely used CSS reset property. Depending on the developers working environment with CSS reset component, there is nifty change (like adding some Bootstrap things) comes in newly version of bootstrap 4.

Reboot built upon Normalize.css and it combines reset file and base style into a single file. Reboot.css provides simple baseline using element selectors.  Lets check this out here

 

Rearranged Support for IE

It’s been a matter of headache for the developers when old browsers didn’t support some of CSS module. Day by day this kind of problem is growing immensely than before. But Bootstrap 4 creates a new dimension by closing the support for Internet Explorer 8 and 9. Because IE 8/9 doesn’t support CSS media queries which play a vital role in developing responsive framework.

Bootstrap 4 is supporting IE9+ where it can implement and will be able to hold few more excellent CSS module for further development.

I think after launching the whole package of bootstrap 4, the problem will not remain so long. But if you really need an IE 8 support in your framework then you should use bootstrap 3.

 

Enhanced Media Queries and rem, em

In Bootstrap 4, the new rem (root em) unit sets for the typography relative to the font size and root element (html) as well as em units sets instead of pixels. That’s why there’ll be some change in media queries.

It’s without a doubt going to take some getting used to Though, mainly front-end folks working off pixel based PSDs who are utilized to simply repeating over fixed sizes.

 

Card: New Fish in Bootstrap

Card is another new component from the new version of Bootstrap v4, it’s like a content container which has the familiar features of sections such as titles, headers, wide variety of content placing system and footers. Along with this extensive facility, this card supports different kinds of text, images, headers, links, footers and adding any kind of background colors. You can check this out here

If you’re acquainted with the previous version of Bootstrap, cards replace our old panels, thumbnails as well as wells. Related functionality to those modules is accessible as modifier classes for cards.

 

RIP Glyphicons, wells, thumbnails, and panels

In Bootstrap 4, there is a statement about withdrawing the total support of Glyphicon, wells, thumbnails, and panels. But, Card is the great alternative to wells, thumbnails, and panels.

 

Rewritten JavaScript Plugins  

Depending on the latest specialization in the new version of Bootstrap v4, all kinds of Javascript plugins are rewritten in ES6 method. Although some plugins are removed for this course of action but each things are overpowered than before with new upgraded UMD support, methods, options and lots more.

New Customization Options

Unlike Bootstrap 3 – gradients, transitions, shadows, grid classes etc. all style statements moved to sass variables to provide better, easier and scalable customization option.

 

Much More …

Bootstrap 4 comes with much more for end-user to experts. Such as –

• New JavaScript library for tooltips, popovers, and dropdowns called popover.js.
• Rewritten and simplified build tools
• Custom form control and validation styles, redesigned carousel, and tons of new components

to make your development journey lot easier and simplified with Bootstrap 4.

 

Time to wrap it up,  now above we see only the features relating with the bootstrap v4 beta, don’t worry beta version is production ready and promoted by Bootstrap official website (default download package), and stable  version is on the way.

We can guess more exciting things or major changes will not come with the stable version of Bootstrap 4. So, you can start using Bootstrap 4 for your next web projects. Stay tuned with us and give us your valuable feedback.