Bootstrap 4 Released, But It May Be Unnecessary

After three years in development, the front-end framework Bootstrap 4 has been released. But it emerges into a world with a dramatically different web than that which existed when Mark Otto made the first commit, leading some developers to question if it's even necessary.

The major features of version 4 include:

• Improved grid system (Flexbox on by default)
• Now uses Sass (instead of Less)
• No support for IE8, IE9, and iOS 6
• Rewrite of JavaScript plugins
• Now uses rem instead of px.

Developers looking to upgrade from version 3 will need to test and possibly fix some issues. Much will work as is, but there are breaking changes. There is a migration guide that lists out what is different.

One of Bootstrap's advantages is its grid system. This system gave web pages a declarable way to render content in a grid system that flowed content from desktop to mobile without unnecessary tricks. The Bootstrap 4 grid system uses flexbox, which is supported on nearly all modern web browsers. The use of this feature is partly why only IE10+ and iOS7+ are supported. If legacy browsers are still needed for a project, developers will need to continue using Bootstrap 3. However, maintenance for Bootstrap 3 ended in 2016.

First released in 2011 as a product of Twitter, Bootstrap dubbed itself "The most popular HTML, CSS, and JS library in the world", but its growth seems to have topped out. Some, like Dan Tao, have criticized Boostrap for its tight coupling and lack of semantic meaning:

What at first seemed like a great set of building blocks eventually starts to morph into a mountain of technical debt. Your HTML is littered with deeply nested structures with Bootstrap-specific attributes.

The first alpha was released in August 2015, with the first beta two years later. But has Bootstrap 4 arrived at a time where it may no longer be needed? Its grid system is one of its biggest features, but the adoption of CSS Grid by mainline browsers means that Bootstrap 4's new flexbox-based grid is already outdated.

Natalya Shelburne, a software engineer at the New York Times, wrote that CSS Grid is the future:

CSS Grid isn’t a hack, it’s a proper layout tool for the web. You don’t need to install anything, you don’t need a preprocessor, and you don’t need to twist your brain into knots just to understand how it works.

In addition, with component-based styling techniques, such as the ones often used with React or Vue.js, the traditional "global CSS" techniques are unnecessary, says Ryan Oglesby:

With the help of UI libraries such as React or Vue.js, modern web application architecture has embraced loosely coupled, highly cohesive components that often co-locate HTML, CSS, and JavaScript in the same file.

Of course, Bootstrap's JavaScript plugins such as Popover and the Form controls make it a go-to framework for developers looking to get something decent looking up and running quickly.