The blog post went live on August 10th, Bootstrap 4 has finally gone from “watch out!” alpha to “let’s eat!” beta. Bootstrap and even just the version 4 changes is too big to cover in just one article, so this article will focus on the flexbox usage.

Hello Flexbox

Seeing new terms is a bit scary and a bit exciting. The basic instinct for all animals when encountering something new is to answer the following questions.

  1. Is it safe?
  2. Is it food?
  3. Can I have sex with it?
  4. And finally, is it compatible with all major browsers?

Flexbox is a layout mode. Other layout modes you may recognize are block, inline, table, and positioned. The tale of layout modes is the tale of designer pain through the ages of the internets. It all started when David Siegel ruined the web when he advocated using tables to gain more control over web design. I’m sure I still have a spacer GIF from those days if I could find the thing (they are hard to see).

Jeffrey Zeldman was along the first to argue for web standards. CSS2 gave us floats and other tools which allowed for greater separation of content and layout concerns. These tools were enshrined at the iconic Zen Garden, which still stands today, but is no longer needed. These tools aren’t perfect. For just one idea of what web developers still have to struggle with, just do a Google search for “how to center in CSS”. There are thousands of results with the first result being a site dedicated specifically to that topic!

Now we are at another turning point. The flexbox layout mode has been working through the standards since 2009 but we are just now at the point where it’s ready for prime time. The Bootstrap 4 beta release serves as a welcome to the masses to jump on this relatively new tool. Other front-end frameworks have been using them, but Bootstrap is by far the most popular and is also one of the most “starred” repositories on Github.

Browser Support

The list of changes for Bootstrap 4 show the following for browser support. If your visitors meet these requirements, then you should be fine.

  • Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.
  • Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.

As previously mentioned, the inclusion of flexbox into Bootstrap is a sort of “coming of age” for flexbox. The popularity of Bootstrap means that it has become a mainstream tool rather than an edge toy.

Flexbox isn’t without its problems though. The W3C shows flexbox at the “candidate recommendation” stage in the process to becoming a full recommendation. There are browser issues to work around (as if we haven’t been dealing with this already) Bootstrap 4 itself is still in beta. That’s a lot of parts which could change. Keep an eye on the mentioned links and also check caniuse.com for browser statistics.

Getting Started

The simplest way to get started with using flexbox is to use Bootstrap, of course. Take a look at the migration page for instructions on moving from version 3 to version 4, but much of Bootstrap is still familiar. Among those changes is flexbox utilities. This box of tools gives you the full power of the flexbox layout options (including centering!) It may also be a good idea to play with flexbox outside of Bootstrap to get a feel for the lower level functionality. There are lots of cheat sheets and tutorials which can help with this.

Back to Work!

Remember that these tools are meant to be used in production. That means you need to start producing! It’s not time to open up that editor, fire up those build tools, prime the pipelines and hit the publish button. Your customers don’t care what we use, but they do care that we get the things done on time and on budget. Bootstrap continues to be a powerful tool for speeding up our workflows and flexbox is the most exciting addition for creating layouts in a long time.