Beyond Java

The first application I migrated to Bootstrap 4 recently worked out of the box. Add the new CSS and JavaScript, find a replacement for the Glyphicons and you're done. Awesome! Only... well, it took me a couple of days to realize that my application was broken. There's a great migration guide for Bootstrap 4, and for a good reason. It's a good idea to read it.

By the way, if you're already familiar with the migration guide from an alpha version of Bootstrap 4, read it again. The Bootstrap team has made a couple of last-minute changes.

How much work is migrating from Bootstrap 3 to Bootstrap 4?

For most developers, migrating to Bootstrap 4 should be easy. I recommend reading the new documentation and comparing it to the documentation of the 3.3 branch. You can scan the differences in a day, or grok them thoroughly in a week. After that, the migration should be a walk in the park. Almost everything is covered by the migration guide, which allows you to automate the migration. Many things are simply a matter of search-and-replace.

My own point of view is slightly different. Currently, our team has started to migrate BootsFaces to Bootstrap 4. We didn't expect that, but it amounts to re-writing BootsFaces from scratch. Our goal isn't simply to provide an easy update path. Obviously, that's one of our main goals, but the other, equally important goal is to allow you to unleash the full power of Bootstrap 4 with BootsFaces 2.0. So we have to look at all the gory details. And that's impressive. Bootstrap 4 is a great improvement over Bootstrap 4. It provides a host of new options, allows you to control the layout much more fine-grained than ever, and it removes a few rough edges of its predecessor.

Improved grid system

The heart and soul of Bootstrap is the grid system. Bootstrap 4 improves it considerably.

First, it adds a new breakpoint. That's good because it adds more flexibility, but it's also a major source of incompatibility. Bootstrap 4 introduces a new breakpoint below the old "xs" breakpoint. In almost any case, you can omit the "xs" when specifying the desired layout. That's because "xs" is defined as "on any screen wider than 0 pixels". For instance, to get three equal-width columns, use this HTML code:

The other breakpoints are:

• sm (≥ 576px)
• md (≥ 768 px)
• lg (≥ 992 px)
• xl (≥ 1200 px)

If you look closely at this list (and remember the old breakpoints well), you'll see that the breakpoint at 576 pixels is new. Unfortunately, the Bootstrap team chose to call it "sm", which used to be 768 pixels in Bootstrap 3. In other words: you'll have to push each breakpoint one level up during the migration.

Customizing Bootstrap

From my point of view, I think the choice of the new breakpoint is a bit odd. Hardly does an application of mine run on a screen with less than 768 pixels width. But I frequently deal with wide-screen monitors. When everybody talks about 4k monitors, the choice for "xl" leaves a lot of the screen blank. If you have to deal with such a situation, it's easy to customize Bootstrap. A couple of weeks ago, I described how to customize Bootstrap with Angular. The example I chose at the time was the color theme. You can modify the breakpoints and the number of columns in a similar way:

Auto-sizing the columns

Talking about the number of columns: since Bootstrap 4 you aren't limited to the fixed set of twelve columns. There are two new options. Omitting the number from the "col-xx-yy" class creates equal-width columns. Add this with omitting the "xs" breakpoint reduces the class name to "col", like so:

This is something new: in Bootstrap 3 you couldn't define a five-column layout (unless you modified the LESS files and compiles Bootstrap from source).

You can also give one or more columns as much space as it needs. That's achieved by the "auto" classes:

In this case, the central column gets as much space as it needs, and the outer two columns are equally wide.

As much as I love this feature, I recommend to use it with care. The killer feature of Bootstrap was the automatical alignment to the grid of twelve columns. Using "auto" bears the risk to end up with an unruly design.

Flexbox

Flexbox was my personal reason to adopt Bootstrap 4 during the beta phase. Flexbox has many advantages. In my eyes, the most important advantage is you can align components vertically. In the past, you had to add CSS frameworks like Masonry to achieve that. Now the life of the average developer has become simpler. Bootstrap 4 does the trick. The most popular and most well-known component featuring Flexbox is the new "cards" component.

Components that have been dropped

Cards are so flexible that the Bootstrap team decided some of the old components, like thumbnail, well, jumbotron, and panel. They can easily be emulated by cards.

Colors

I already mentioned the colors briefly. Bootstrap 4 introduces the "color utilities", which is a set of CSS classes which can be used almost anywhere. So it's easier to memorize the exact name of the CSS class. Read the full details on the Bootstrap documentation.

Countless utilities

There are quite a few other utilities. For instance, you've got very fine-grained control over the margins and borders between components. Other utilities control the visibility or the vertical alignment of components. As with the colors utilities, the ideas is you can use the CSS classes of the utilities almost anywhere, which gives you an impressive amount of flexibility.

SASS

That's mostly a technical issue for the experts. Bootstrap has moved from LESS to SASS. That's another superset of CSS. I don't know why LESS was abandoned. All I can say is now you can customize a lot of Bootstrap without having to change the core classes yourself. We've already seen this above when I showed the variables defining the grid. Read the full story at the Bootstrap documentation pages.

What about Font Awesome and the Glyphicons?

Bootstrap 3 came pre-packaged with a popular icon set, the Glyphicons. Bootstrap 4 doesn't include any icon set. If you need an icon set, just include it yourself. This way, you can combine Bootstrap 4 with Font Awesome, the Octicons, the current Glyphicons or several other icon sets.

Simplyfied HTML code

Several components now use slightly different HTML code. In most cases, the markup has become simpler. Just have a look at the dropdown or the navbar. In Bootstrap 3 you had to use <ul> and <li> define the dropdown. In version 4 you get rid of that boiler-plate code. The downside is that you have to look very careful during the migration phase.

Wrapping it up

There's a lot more to tell, but you've got the gist of it. Bootstrap 4 is a major improvement over its predecessor. It gives you a lot more influence over the page layout, and it simplifies many common tasks for web designers and developers. However, it pays to spend some time learning what's new. Many changes are subtle, so chances are you miss them at first.

Remains the question when to migrate to Bootstrap 4. If you've already got a major application using Bootstrap 3, there's a simple answer: Don't. Wait until you've got a good reason to migrate.

Those of you being able to start on a green field or working on a small application using Bootstrap 3 can risk migrating soon. Granted, Bootstrap 4 is still in the beta phase. But the alpha phase was extremely long - more than two years - so Bootstrap 4 is fairly mature. Even so, there were many breaking changes between beta 1 and beta 2. I don't believe this will happen again. The Bootstrap team announced to only do bugfixes until the final release. They haven't announced a release date yet, but I expect it to be soon.