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.
Comments
Post a Comment