Top 10 Cool New Features in Bootstrap 4

What's new in Bootstrap 4?

Bootstrap 4 Alpha 6 is out and it is packed with new features. Let's have a look at the top 10 most expected updates it includes: 

1. Sass instead of CSS

The new Bootstrap 4 with Sass

AS opposed to Bootstrap 3, which used pure CSS, Bootstrap 4 uses Sass, which is precompiled CSS using variables. This was a major request in Bootstrap 3 as well, so much so that a separate project was created which added Sass support to Bootstrap 2 and 3.

Here is the link to the Bootstrap 2 & 3 Sass GitHub project: https://github.com/twbs/bootstrap-sass

2. Flat Design

Bootstrap 4 Flat Design

While Bootstrap 3 had a more gradient oriented design, Bootstrap 4 will be more similar to the well-known material design.

Bootstrap 4 also uses flexbox in order to have same-height-elements.

3. Cards

Bootstrap 4 Cards

Bootstrap 4 include the option to display content in fully customizable cars. With no preset size, Bootstrap cards fit the size of the parent element.

You might be familiar with Cards from Material Design frameworks.

4. Responsive Floats

Bootstrap 4 Responsive Floats

With Bootstrap 4 you will have the ability to dynamically float elements respective to the viewport width each device.

The same viewport breakpoints which are applied to the grid system are also applied to the responsive floats.

5. New Navbar

Bootstrap 4 New Navbar

You now have 3 Navbar options at your fingertips, out of the box. It combines the navbar-default / navbar-inverse and the bg-primary / bg-inverse classes.

6. New Forms

Bootstrap 4 New Forms

The major change is that the class form-horizontal no longer exists. But with all the new responsive utilities you will surely find the perfect way to style your forms.

7. New JavaScript Plugins

Bootstrap 4 JavaScript

All JavaScript plugins are ES6 compliant and can be enabled and configured by use of the data- attribute.

Careful though,  each element can only contain a single data attribute.

8. Typography Updates

Bootstrap 4 Typography

All elements have increased in size making typography more readable and bringing Bootstrap a step closer to material design, which uses large clear text elements.

Additionally, font sizes are expressed in em instead of px.

9. No More Internet Explorer 8 & 9 Support

Bootstrap 4 No IE 8 & 9 Support

My Personal Favourite is that Bootstrap 4 will no longer support Internet Explorer 8 and Internet Explorere 9. With frameworks like Bootstrap dropping support for IE 8 & 9 things in the web development world might actually move faster.

How do you feel about the Bootstrap Team decision? Let me know in the comments section below.

10. No More Glyphicons 

Bootstrap 4 No More Glyphicons

As of Bootstrap 4 Glyphicons will no longer be included in the framework. This is not a big change though as most people were using Font Awesome anyway.

Leave your comments below and be sure to subscribe.