The 5W1H of Bootstrap 4

This article sees the light of day 1 year after the first released alpha version of Bootstrap 4, meaning at the time of this writing we are still on Alpha 3. A lot has changed since then throughout this alpha state progression. Yet, nothing seems to be happening in the real world. Nobody seems to be using it just yet. Although, as usual, this is like filling a balloon with water; it won’t burst until it does.

Yet, get this: Bootstrap 3 (BS3) is still evolving; this past July (2016), version 3.3.7 was released, which is an upgrade from version 3.3.6 released in November 2015.

In order to shed more light into what lies ahead regarding Bootstrap 4 (BS4) I will take the “5W1H” approach to write this article, gathering interesting facts around the questions Who, What, When, Where, Why and How - not necessarily in that order though!

WHY is it important?

Don’t change horses in midstream—Proverb

The change is BIG and important since Bootstrap is the leading underlying front-end framework for pretty much any APP and CMS on this planet (Earth). The semantic changes that the new version conveys and the fact that a stable version keeps evolving with different code semantics alone open the door to many questions regarding sustainability, compatibility and timing. Such as: Is it worth maintaining our current BS3 implementation since BS4 relies on a different code “phraseology”? And of course, if we are to change horses, are we past the midstream yet?

Bootstrap 4

WHERE does it apply?

The flutter of a butterfly’s wings can ultimately cause a typhoon halfway around the world—Chaos Theory

Everywhere: Content Management Systems (CMS), Web and Mobile Applications (APP), Customer Relationship Management (CRM), E-commerce and so on.

Regardless if you are a fan of the CMS way and crazy about WordPress-Drupal-Joomla and related e-commerce plugins (or even standalone ones like Magento), or prefer the trendy APP way, wooing Angular-React-Meteor, or even private source solutions based on Salesforce or Microsoft … you will find a theme, plugin, add-on, extension or implementation for the most popular front-end framework to use as an underlying foundation.

WHAT changed in Bootstrap 4?

The Devil is in the details, but so is salvation. —Hyman G. Rickover

As stated earlier, there are some semantics changes in the CSS classes regarding List groups, Navs, Pagination, Breadcrumbs, Labels badges and tags, Utilities, Blockquotes and Responsive images, to mention the most relevant. But even if we get that right, there are also important changes that could trigger unexpected side effects in the website behaviour and may call for serious site-wide adjustments when migrating a website from BS3 to BS4.

If we’re starting a website from scratch with BS4 then it’s probably not such a big deal compared to a migration, although there are still things we really need to be aware of and keep in mind during the development process.

Either way, it’s good to have that list of details handy.

TABLE OF MOST RELEVANT CHANGES

NEW DROPPED
Flexbox support (optional) Non-responsive usage
Sass Less
Android v5.0 IE8, iOS 6
Rem as primary CSS unit Px
Media queries are now in Ems Px
5 Media Queries (. col-xl-) 4 Media queries
Card component Panels, thumbnails, and wells
Global font-size increased to 16px. Global font-size of 14px.
Octicons/Font Awesome (as suggested options) Glyphicons icon font
Position: sticky Polyfill, ScrollPos-Styler library (as suggested options) Affix jQuery plugin
Custom reset file Normalized—Standard version reset

For the official list of changes you can check out this page.

HOW to switch?

Genius is 1% inspiration and 99% perspiration. —Thomas A. Edison

The most significant challenge will come when switching versions on an existing website.

There are already some tutorials out there on how to migrate from BS3 to BS4. Most of them reflect the unavoidable hassle of having to manually replace or treat HTML chunks of code separately, or running a semi-automated process to “Find/Replace” old classes with new ones in the best case scenario. Although, this can easily prove to be a tricky task if we are to find words like “item”, especially if we have them combined with our own custom classes.

For small websites or blogs this doesn’t seem like the end of the world, more like a tiny pebble in the shoe. For large websites (think corporate sites with many branches and customized content per region) where part of the content has been integrated through WYSIWYG editors and where its content could also have BS classes within the HTML, this VERY likely and common scenario can quickly become a nightmare.

How do we go about making all the changes needed for migration? There is no easy answer to this. I would say proceeding carefully, slowly and testing thoroughly every step of the way.

This sounds like starting from scratch isn’t such a bad idea… Well, it’s worth giving migration a shot and making an educated guess halfway. Websites will shape up with the find/replace procedure, so we can then make adjustments to the new custom.css reality. Although, if we mixed too many custom classes with BS classes, this could be a long process.

WHO is affected?

Research is creating new knowledge. —Neil Armstrong

Let’s take a look at some of the consequences the new version will bring for all those implicated in a BS4 development process.

FRONT-END DEVELOPERS

  • Unless migrating, no need to know the previous version semantics
  • Knowledge of SASS is a definite asset
  • Understanding of CSS “em” and “rem” units
  • Understanding of CSS Flexbox

WEB DESIGNERS

  • New grid to learn
  • Understanding of CSS “em” units at least for px equivalency.
  • Understanding of CSS Flexbox

CLIENT SERVICE AND THE CLIENT

  • Weigh Pros and Cons of whether a project should be started from scratch or migrated.
  • Understanding the implications of converting an existing website made with BS3 to BS4 semantics.
  • Understanding that when adjusting measurements due to “em” units, changes might be needed; this could change the look & feel of a given website at first glance.
  • Understanding the implications of changing surrounding HTML code semantics integrated along with content (potentially to be changed at the database level).

Bootstrap 4

WHEN is the right time to change to Bootstrap 4?

Every new beginning comes from some other beginning’s end. —Seneca

So how to know when the development cycle of BS3 has ended, if it’s still being improved to this date, and when a more stable version of BS4 will be ready. This is a tough question to answer, and even the development team will probably have a hard time answering it. Although, if we’re curious, we can always keep an eye on the open issues and determine if they affect our potential projects.

It’s important to reinforce the fact that, to this date, the BS4 migration guide is flagged as “incomplete”. But if we get to the point of having to make a decision to either migrate or start developing a website from scratch with BS4, an educated guess based on the following aspects may lead to an answer:

  1. Weigh the reasons why we need to make the change (features, futurism, R&D, whim or “all of the above”).
  2. Check the Github repo and assess if any open issues affect our project (and if we’re able to fix them).
  3. Weigh pros/cons of this change (usually time and money).

So, is it worth it?

If YES, then the time to change can very well be NOW, because either way BS4 will be adopted and will keep evolving.

If NOT, then stay with BS3. It’s a great framework, which still has 3 or 4 more years of usability. Hey, I’m pretty sure there are many BS2 websites out there that are working just fine on most devices.

 

If unsure, give it a rest and revisit the aforementioned steps in 3 or 6 months.