Let’s Talk Bootstrap 4

The following is a wrap-up of the biggest changes and what you might need to know when transitioning your project from BS3 to BS4, and of some things I learned while upgrading the Scrivito Example App. For a quick overview of how we implemented these changes check out our "The Scrivito Example App now Uses Bootstrap 4" article. 

In the new release, they have added a new smaller breakpoint. Providing better support for small screens, confusingly, they did not just add a smaller class or breakpoint name, they added a new XL tier. So the existing viewport ranges go one size down. The effect is that now you can easily differentiate between portrait and landscape mode on mobile screen widths.

The Bootstrap 3 grid and all former versions were about floating DIVs – not that easy to learn, but once understood, you were able to rapidly prototype whatever you needed in HTML. The old 12 column grid was customizable using LESS or, later, SASS variables, so you were able to arrange your content easily. But sometimes a blessing is a curse, and we had our first contact with the bad parts of BS3.

By default, in BS3, you cannot create a layout grid with an odd number of columns of equal width. Sure, you could add some custom layout CSS, but then you have to be sure to take care of the responsive adaptions completely on your own.

Bootstrap 4 calls it auto-layout grid. Because the new grid is built by Flexbox, you can use column widths independently of units. It feels like a good table without the headache of non-mobile support. See the Codepen example below, and be sure to adjust the results window size to see how it automatically adjusts.

But this is not the main advantage for me – I think what all web designers are looking for is an easy and non-JavaScript-dependent solution for “Equal-height Columns” and “Vertical Centering”.

Next to the often-wished-for vertically centered elements, BS4 offers an easy way to have those equal-height boxes. BS4 includes predefined markup for “Equal-height Columns” and “Vertical Centering” use cases. In BS4, “cards” (formerly called “panels”) are in a special group so they become all the same height. This is an option, but if you want to use this in combination with the grid classes, Bootstrap goes a different way. Included in their newest release is a bunch of helper classes. Scroll through the Codepen example below to see them in action.

In BS3, to make columns reorder on mobile, you had to change the whole markup wrapper using special classes like col-push and col-pull. Those days are over! To reorder columns in BS4 we can now use the extended functionality of Flexbox. Here you can set an individual order for each element. BS4 comes with handy responsive ordering classes such as order-md-2. So now you can reorder a row in every viewport range. Scroll through the Codepen below for more information:

The biggest change in BS4 is the switch from display: block to display: flex. With this change, you cannot use floats like float: left or right for alignment features anymore. Unfortunately, the old navbar-right helper class for positioning navigations to the right is gone as well. Now, with Flexbox, you use different types of margin settings by applying generic helper classes for margins; navbar-right becomes ml-auto. From my point of view, it is not that intuitive for developers, but you will quickly get the hang of it with a deeper knowledge of Flexbox. This is just something you will have to learn and, once you do, it works really well.

Next to some changes under the hood, there are some new pre-built features we previously always had to implement by ourselves. For example, with BS4, you can easily use helper classes for adapting the breakpoint when the navigation turns into a hamburger menu.

All or most of these cool new features are based on the implementation of Flexbox in Bootstrap 4. If you are working on static HTML files, you can live with all the circumstances. But when you're working with React, most times you have, by default, an unstyled <div> around your design element. With BS3 (based on floating <div> elements), you don't have any issues with one more <div> around your markup. BS4, however, uses the same markup but it is based on Flexbox.

If you wrap <div class="col"></div> in an unchanged <div>, your design is broken. Initially, a <div> is display: block – in a Flexbox environment you have to keep an eye on the fact that sometimes a wrapper <div> has to be display: flex. In this case you just have to add a row or d-flex class to your wrapper element – the solution is simple, but not easy to debug when you see it the first time.

If you’re left wondering if Bootstrap 4 is good for your project, try to look at the whole thing from a distance. Every new release with breaking changes of a framework people have grown to love is a kind of change nobody ever wants. However, the main advantage of using BS4 is the built-in Flexbox support. You can simply do more with less code. As well, after a bit of a learning curve, you are able to prototype websites faster than ever before. I personally think that some class changes and the official documentation could be more intuitive. But in the end, there are always growing pains with improved tools.

After all the critical words about the new release, Bootstrap is still my first choice. Not because of the framework itself – there are other ones I also like, Foundation, Bulma or Milligram, for example. For me, the biggest point is not which is the best framework, but which has the most extensive community support. With BS4 you get this community support as well as lots of resources like Bootsnipp where you can lean back and learn from others. In all, progress is progress, and with a great community, the addition of Flexbox and faster prototyping, I can recommend changing to Bootstrap 4.