Over a million developers have joined DZone.

5 Cool Things About the Next Version of Bootstrap

DZone's Guide to

5 Cool Things About the Next Version of Bootstrap

Strap on your seatbelts! Bootstrap 4 is going to leave Bootstrap 3 in the dust, but don't worry. Developers will still support 3.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

The alpha release of Bootstrap 4 was just announced this week, and I wanted to make everyone aptly aware that this is a major overhaul of this popular (probably the most popular) responsive CSS framework.  The project creator, Mark Otto, says that the release "touches nearly every line of code," and he wasn't kidding.

1. Much Smaller File Size

You know the saying: "deleted code is debugged code." You constantly see this when the best refactoring sessions result in removing a ton of code from your project and slimming it down. If you download the alpha, you'll notice that, compared to the last stable release of Bootstrap 3 (3.3.5), which is about 123KB (the bootstrap.min.css file), the new 4.0.0 alpha bootstrap.min.css is around 88KB. This was probably helped a lot by dropping support for IE8.

2. Switches From LESS to Sass

Community and performance were the two main reasons Bootstrap made this switch for version 4. Specifically, their arguments for the switch were:

  • The Sass project is iterating faster than LESS

  • Switching to Sass improved the framework's performance

However, looking at the GitHub pages, it looks like LESS still has the edge in popularity, but Bootstrap says that Sass is growing quickly. Either way, you could still do plenty of your CSS coding in Sass with Bootstrap 3 using right methods. What some people are wondering is whether PostCSS, an up-and-coming, modular tool that can do preprocessing with great performance, should have replaced LESS instead.

3. Toggle Flexbox Support

Bootstrap 4 now supports the use of W3C's Flexbox feature, which is still smoothing out all of its browser support. For that reason, it's an optional feature that you can turn on if you so desire. 

If you need to quickly brush up on Flexbox, the best guide out there is probably the one on CSS-Tricks. There's also a very new 20-video series on Flexbox if you'd prefer that method.

4. Refocuses on Card UI Pattern 

Andrew Trice and I thought this was an important UI pattern to understand back in 2013. Google's Material Design, and now Bootstrap 4 are now all-in on this trend. Boostrap drops wells, thumbnails, and panels for cards

Image title

5. JS Plugins Re-Written in ES6

With the finalization and standardization of EcmaScript 6 a few months ago, Bootstrap seems to be keeping up well with the latest web technology. They've already re-written all of their JavaScript plugins to take advantage of ES6, and they've also updated the plugins to come with, "UMD support, generic teardown methods, option type checking, and tons more."

Enough waiting! Head over to the docs and see how it looks!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

css ,bootstrap ,responsive design

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}