What’s New and What’s Changed in Bootstrap 4
On August 19th, Bootstrap celebrated its 4th birthday, but don’t rejoice just yet. This is only the alpha and a stable release is only in the testing phase.
Still, I’ve come across a particular question through many Google searches, “Should I use Bootstrap 4 now?” or “Should I learn Bootstrap 3 or Bootstrap 4 in 2017?”
Although version 3 does its job very well, our IT brain says that increasing the number by one means that we are missing something important in our life :). That’s why I did not think for a long time, just installed a new version myself and decided to check what has changed.
Let’s take a look at what Bootstrap 4 will bring to us!
GOODBYE LESS, HELLO SASS
As for the SASS lovers — Bootstrap’s source is now Sass! In all versions, it used Less as its main preprocessor. It wasn’t even until version 3.0 that a Sass port was created.
This is great because Sass tends to be more favorable by frontend developers. It also compiles faster thanks to LibSass.
I, a big fan of this language, thought it was especially pleasing moving to SASS. Although, most developers as from the looks of it, there doesn’t seem to be any plans for a LESS version or a LESS port. It’s kind of a bummer, since in some cases developers actually prefer LESS (or have just grown very used to it). Hopefully a port is created and maintained.
The out-of-the-box Bootstrap v4 won’t support Flexbox, instead utilizing a more traditional floator display table methods. The lack of standard Flexbox integration helps support IE9+, however, if you’re willing to forego this support and bump it up to IE10+ you can enable Flexbox across your project.
This is done by changing the boolean variable inside the _variables.scss file; your compiled CSS will now include Flexbox styles. Flexbox is used not only on the grid, but also with various other elements including the new card component, input groups and media components. But let’s be honest – should this surprise us? With the advent of Flexbox, many developers have created themselves their comfortable flex-grid and enjoy it. Or those who really wanted to work with the framework on Flexbox and mixins with their use – Hello Foundation. With the release of Flexbox, Bootstrap seems deprecated, but I hope that it will please us first with GRID! Something that we are only promised in Bootstrap 5.
Bootstrap 4 now has 5 breakpoints, which make it possible to accommodate the widest range of devices. This is XS, SM, MD, LG and now XL breakpoints. This added breakpoint supports a range of media requests of up to 544px or 34em.
Now the 5 tiers are as follows:
- Extra small (xs) – below 576px;
- Small (sm) – between 576px and 768px;
- Medium (md) – between 768px and 992px;
- Large (lg) – between 992px and 1200px;
- Extra Large (xl) – over 1200px;
I do not know why this was not done in version 3, as everyone clearly saw how ugly it looked on the mobile device in portrait. But now we can make a portrait on mobile devices more attractive than it was before. Personally, I was pleased.
CHANGES IN TYPOGRAPHY
In Bootstrap 4, 16px is the new default font size (it was 14px previously), which means that the size of the text is bigger and more visible.
Moreover, in this new version everything is intended to be more dynamic thanks to an important enhancement: the font sizing and the grid system are now based on REMS. Be aware that, if you prefer, you can still use pixels, ems, or points for typography. However, Bootstrap 4 font sizing is completely based on the rem unit and the reason behind this change is rems make easier for mobile devices to scale up or down. It might make sense to override Bootstrap’s default html tag to be font size 10px. This way you can do your calculations way faster.
And talking about fonts, it’s important to remember that Bootstrap 4 drops the Glyphicons icon font. If you need icons, the dev team suggests the Font Awesome. The use of rems applies to the grid system as well, that now has max-width set in rems.
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.
These are just some of the changes and improvements to the Bootstrap framework.For a more conclusive list, check out the Bootstrap 4 migration guide.
To sum it up, the 4th version of Bootstrap is the best one. it helps you get more stuff done and keeps you up with the latest trends in web design. While we are waiting for the Beta version to go live, before switching over all of our produce to v4.0, we highly recommend you test it out.
Play with it and be ready to fully integrate it when the time comes or you will be left behind.
Be sure to tell your friends what a cool article you read today:). And if you have interesting thoughts on the topic, I suggest sharing them in the comments.
Stay in touch