Browse By

What’s new in Bootstrap 4. A beginners guide

If you work in the web industry it is highly likely that Bootstrap has appeared in your workflow at some point or other, either through personal preference or because your client has requested it. If you are new to Bootstrap there are a few naming conventions that may seem alien at first but once you get the hang of it, it can really streamline and speed up the build process. This is especially true for larger applications which might have teams of developers iterating on the same project.

That’s not to say there aren’t other very good frameworks out there that have their own merits, but there is a reason why Bootstrap has gained traction and with the weight of the community behind it Bootstrap has become the most popular front-end framework with over 86,000 stars on GitHub. There’s also a huge array of resources, articles, tutorials, third-party plug-ins, extensions, theme builders, and so on. Over the last year or so, the people behind Bootstrap have been busy making improvements and very soon Bootstrap 4 will be here. Bootstrap 4 Alpha is already available for test drive.

With each new release there are the inevitable changes and modifications that take some adapting and getting used to. Outlined below are a few of the biggest changes that are due to affect web developers in their workflow. Bootstrap 4 looks like a steady evolution rather than radical change and the potential impact of each change is actually quite modest but it is good to be prepared nonetheless.

Support dropped for Internet Explorer 8

The decision to drop support for IE8, according to the Bootstrap core team, “means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks”. There may be occasions when you still need to offer IE8 support for your clients. What happens then? Simple, use Bootstrap 3. The goods news is that lessons have been learned from the past when support for Bootstrap 2 was dropped immediately on the release of Bootstrap 3. This is not going to happen again.

For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

Before starting a new project it is good practice to take steps to discuss browser support with your client and whether support for legacy browsers is required so as to avoid any headaches.

Moved from Less to Sass

The statement that we have “moved from Less to Sass” seems like an odd one considering Bootstrap 3 already comes with Sass, but it would seem that Less is being dropped entirely in Bootstrap 4. This doesn’t necessarily imply that there is anything wrong with Less, just that in the battle between Less and Sass the developers are leaning towards Sass which has a “large community of Sass developers”, libsass is “crazy fast” and the “syntax os is more explicitly clear”. We shouldn’t get too hung up on this as the world of CSS preprocessors is still in it’s infancy and this is likely to change again in the future. It’s refreshing to hear Mark Otto, the creator of Bootstrap, confirming my own feelings on the matter of CSS preprocessors, but that’s a story for another day:-

A Completely New Navbar, totally different from all previous Bootstrap navbar

That’s right. You read it correctly:- a completely overhauled navbar, totally different from Bootstraps current navbar system is what I had hoped to see most! Unfortunately, it seems not much is due to change on this front. This was one area I really disliked when I first started using Bootstrap for client work, and it has to be said I’m still not too keen on it today although I have learned to live with it.

navbar navbar-default navbar-fixed-top + navbar-header + navbar-brand

I believe the current system makes for unnecessary code bloat as the amount of class overrides needed to get what you want can be very frustrating and you instinctively know you should be able to achieve what you want with far less code.

Modified Grid System using rems

While the HTML Syntax will remain the same the media queries behind it have been modified to use rem rather than pixels. There is also a new grid tier to better target mobile devices. The benefit of using rem is that everything is dynamic and relative to the root HTML tag. This could possibly lead to challenges when working along with the design team working with PSD who may not fully understand the web as a fluid medium and may insist on the font size being “12 pixels” and the spacing of element X being 300px from element Y. Hopefully we have come far enough now to overcome these hurdles but there can still be differences of opinion and communication challenges between designer and developer.

Better Documentation with improved Search

It would appear that the design, layout and functionality of the Bootstrap documentation is due some upgrades along with an improved search function. The new documentation will be in Markdown featuring streamlined examples and code snippets to make working with the docs easier.


The above illustration credit: Mark Otto, Dribbble – a concept of how the new documentation may look when completed.

The proposed changes are a welcome addition as the current documentation can be a little awkward. This part for me is definitely a weaker area of Bootstrap and the docs would greatly benefit by being a little more user-friendly.

No more wells, thumbnails, or panels

These are due to be removed completely in favour of cards. As for the reason for this I honestly have no idea except to think bringing them all together under one “umbrella” term is more logical. Perhaps somebody can enlighten me in the comments below.

Other notable changes

  • Opt-in flexbox support. This cannot have been an easy addition and clearly the people at Bootstrap think it’s time to start using this although opinions vary as to whether it’s wise to use flexbox yet in production, even in 2015.
  • New HTML reset called “Reboot” which builds on normalize which is also included.
  • JavaScript plugins all re-written in ES6.
  • Improved auto-placement of tooltips and popovers.

The only question remaining is when Bootstrap 4 will officially be released. That awaits to be seen but I would provisionally estimate to expect using it in production late 2015 / early 2016.

If you enjoyed this article please spread the word

Divi WordPress Theme

Leave a Reply

Your email address will not be published. Required fields are marked *