Bootstrap 4: What’s new? What’s dropped?

Bootstrap, one of the favorite front-end frameworks of developers and designers, launched the much-awaited v4. (hashtag never stop believing)

This iteration, according to Mark Otto and the team, is supposedly a “major rewrite of the complete project”. This does promise a lot of improvements, and also, in a way, suggests there’s a lot for you to figure out if you’re planning to migrate existing projects to v4. Although there aren’t any “breaking changes”, but there’s still a lot to soak in.

Let’s look at some of the most important addition (and removal) of features.

Added: Flexbox, by default

Bootstrap was always powered by float-based styles. This trend sees an overhaul from this update onwards. In recent versions, however, a flexbox alternative was introduced. But, given the widespread browser support of flexbox, it’s now the master of Bootstrap grids.

The CSS behind Bootstrap’s grids doesn’t make a huge difference, but flexbox does offer a lot of flexibility and customizability than floats. For example, flexbox allows you to define one column and have its neighboring siblings automatically resize.

Added: Increased browser support

The flex-based grid system actually prompted another change – browser support. The v4 officially dropped support for IE 8, 9 and iOS 6. This means, to view your Bootstrap websites, you’ll need IE 10+ or iOS 7+. This is a change worth noting.

Added: SASS

Yup, bootstrap has added a lot of sass to the newer version.

Jokes apart, Bootstrap is finally a SASS-first project. Even the Bootstrap source contains a folder called “SASS” in which you can see all the necessary files. For instance,

• “_variables.scss” contains all the required variable settings.
• “Bootstrap.scss” contains all the @import directives. Thereby allowing you to customize your installation.

Added: REM

Except media queries, the v4 has dropped pixels and favored relative units everywhere. This does make the entire thing much more scalable. This change will hopefully help developers develop more structurally-consistent sites.

So, if you weren’t already using (used to) rem units, there couldn’t be a better time than now!

Added: Additional Breakpoint Tier

Bootstrap v4 has taken responsiveness really seriously. Besides just going the flex-route, v4’s responsiveness now also comes with an extra tier.

From this version onwards, you’ll be able to customize the following:

Added: Reboot

Welcome Reboot!

Reboot is a new reset file from Bootstrap and takes Normalize’s resets. These use only element selectors and build upon it with some class-based reset styles.

If you go exploring the file, you’ll find .table and .table-bordered buried in there with several others.

Removed: Custom Builder

You must be familiar with the online customizer that comes with the earlier versions of Bootstrap. Well, you’ll be if you’ve ever downloaded any early version. The tool allowed you to check and uncheck various aspects of the framework, thereby making sure you get your ideal version.

Well, fare thee well – that’s gone.

Instead, what Bootstrap now focuses on is its own modular structure. This allows you to leverage as much SASS as you want from your end, by including precisely what you need and compiling your own deployable end result.

Removed: Glyphicons

Bootstrap v4 gets rid of Glyphicons. Instead of that, you’re advised to find your own favorites and include them in whichever way suits you. The Bootstrap team, however, recommends the following two sets. And we, too, recommend you to use these, and as SVGs rather than as web font icons::

• Iconic
• Octicons

Removed: Grunt

Grunt was an integral part for the previous versions of Bootstrap. It was used to automate many of the common tasks. Well, that’s gone, too.

Instead, Bootstrap v4 comes with a bunch of npm scripts. These can be found in the “package.json” file. Using these npm scripts, you can do things like watching your SASS files for changes, performing limit tests on your JS, or just using run npm dist to do everything – including compiling a distributed version of your finished website.

Conclusion

Along with the changes we discussed, there are a number of not so major changes, too. Fans of elements like panels, wells, and thumbnails might be a bit displeased to learn that these have been replaced by a new component – cards. This is an all-encompassing component, which, in all honesty, is a big improvement.

If you wish to read more about all the changes, come on here!

Mayank Gulati

Partner, ContentNinja

Unhappy with the concept of 5 working days a week, Mayank Gulati started his own Marketing Communications firm, ContentNinja. He now works 7 days a week with clients like Oxford Press, Times Internet, Hostgator, and more.

LinkedIn: https://www.linkedin.com/in/gulatimayank/

Twitter: Personal account is inactive. Company account: https://twitter.com/_contentninja