Bootstrap 4 IS Coming!

Bootstrap 4 is coming

With the imminent release of the second alpha for Bootstrap 4 by the Bootstrap team, it still seems like only yesterday that the two founding team members, Mark Otto (@mdo) and Jacob Thornton (@fat) released the Twitter Bootstrap framework. In fact, it was four years ago. Much has changed, and much more is about to.

Just ‘Bootstrap’, thank you

Bootstrap has dropped the Twitter name and it is not BS! The Bootstrap website says:

The project and framework should always be referred to as Bootstrap. No Twitter before it, no capital s, and no abbreviations except for one, a capital B.

So now you know.

The Bootstrap 4 Team

The team now has seven core contributors and two more focused on the SASS implementation. Add to this the community contributors over these last four years, and that currently makes a round one hundred people involved! Quite a task to manage all of that.

In his latest blog post, Mark Otto tells how he manages the feature process of Bootstrap, given that this is all done an hour here, an hour there, as time permits. Deadlines are flexible; they happen when they happen, and release dates are only announced after the release has been made!

Bootstrap 4 Rebooted

Bootstrap 4 was reported nearly ready towards the end of 2014, so what happened to it? Well, Mark Otto decided that the first version of Bootstrap 4, an iteration of Bootstrap 3 was not good enough. So, he decided to look around and construct a very modern, feature-rich lightweight core framework. What has emerged is a very usable product. And one of those features is Reboot.

This is based on Normalize, created by Nicolas Gallagher, but takes it further. Modern browsers all have different defaults for CSS styles, and Reboot strips and resets these all back to one standard, and sets a standard to follow. For example, margin-top is not used at all, because some browsers collapse top and bottom margins when they meet.

Bootstrap 4 Legacy

Something I see a lot as a technical support worker are the problems caused by using Pixels as the unit of measure for so many CSS element’s width/height/padding/margins and typography. It simply is not responsive. Bootstrap 4 ushers in rems instead for most measurements; change the overall page font-size and almost everything on the page re-sizes – here is a Codepen demonstration this effect. So, this means goodbye to support for IE8. The good news is, having taken that momentous decision, others can follow. jQuery 2.0 can be used as well. Dropping support for IE8 means a leaner, meaner, faster, more functional code base.

But Bootstrap 4 goes further in dropping legacy support for older browsers; it introduces the option of enabling and using flexbox in core. I expect that most framework and templates builders will enable this default. Flexbox is what you really need to make a site truly responsive and flexible. CSS-Tricks has a good explanation and demo. Which browsers will be supported? See here. With IE8 support dropped already, you will see that using flexbox also drops support for IE9. By enabling the flexbox option by default, the Bootstrap 4 codebase is further significantly reduced. Leaner, meaner, more flexible.

Bootstrap 4 Grid and other Components

The Bootstrap 4 grid is better targeted to mobile devices with improved media queries. Do you use wells, panels and thumbnails? All gone in favor of ‘cards’; this Codepen demo will show you what cards can do. So much more has changed or been added. Tooltip and Popover support with tether.js, new display headings, inverse tables, outline buttons, spacing utility classes (to quickly margin or padding spacing), possible inclusion of WTF forms, but no more glyphicons – most designers use FontAwesome anyway.

How Soon?

When will Bootstrap 4 finally release? As a product being developed in contributors’ spare time, the release date is flexible. For sure, the first alpha was surprisingly, relatively bug free and stable. Certainly a few months then. When will we see see Bootstrap 4 in Ultimatum? As Bootstrap 3 will continue as a separate product, the Ultimatum 2.x series will continue to feature that version. It is possible that Ultimatum 3 will feature Bootstrap 4, but only time will tell as the development of both Ultimatum 3 and Bootstrap 4 progress independently.

Easier Web Site Building

Will Bootstrap 4 make it easier to build web sites? My guess is, ‘Yes’. Those of us building web sites know just how much time we spend on fiddling and fine-tuning to get the build to work across browsers and devices. Bootstrap 4 attempts to unify the design process across these platforms to save us time and to do so with a much smaller codebase.

I for one am looking forward to seeing Bootstrap 4 arrive.

by Trevor Nelmes

Trevor is the head of support and testing at Ultimatum Theme and owns a WordPress-based web design business called CDNWebDesign. He has been programming since the 1970's and web designing since 1999. In his spare time, he likes to take scenic photographs in the beautiful Cotswolds in the UK.