Designed to help developers create responsive, mobile-first projects online, Bootstrap is one of the most popular and well-known open source toolkits on the market. This system works with HTML, JS, and CSS, and allows design experts to quickly prototype their ideas and build new apps with a range of responsive grid systems, Sass variables, pre-built components, and exciting plugins.

After years of hard work, Bootstrap recently revealed that they would be launching their eagerly awaited “version 4” update. As you might expect, Bootstrap 4 comes with a range of new additions and examples to explore. We’re going to cover a few of the basics so that you know what to expect when you upgrade.

The New Additions to Bootstrap 4

Importantly, Bootstrap has been careful not to make any changes to their framework that would cause the system to break down or stop working for those using previous editions. However, there have been some significant changes worth looking at. According to Mark Otto, the Bootstrap 4 version is a huge rewrite of the entire project, which means that there’s going to be a lot to get used to. For instance:

1. Default Flexbox

In the past, Bootstrap’s layout has been powered primarily by float-based style grids. In recent versions, there was a flexbox alternative available for use, but today, Flexbox has become the ultimate solution for Bootstrap grids. This technology delivers a great deal more flexibility than the standard floats, with more options for developers to browse through. For instance, with Flexbox, you can define the outline of one column, and make sure that other columns automatically resize around it.

2. LESS to Sass

Lovers of Sass will be happy to hear that Bootstrap has officially emerged as a Sass-first project. Once you download the Bootstrap source, you’ll find a folder entitled “Sass” which comes with all the partials you might need. There’s also Bootstrap.SCSS which houses all the import directives a developer could want, so you can customise your installation to suit your specific needs. If you’re not familiar with Sass, it’s simply a programming language designed to make your CSS more extendable and easy to maintain.

3. More Grid Tiers

There are now 5 different grid tiers or breakpoints available to support a range of portrait and landscape screen dimensions with your Bootstrap solution. Bootstrap 4 comes with the col-xl classes, which extends your media range all the way to 544 pixels. While you might think that the XL tier had been added to support incredibly large screens, the truth is that it’s intended for the opposite. The new smaller screen means that you’ll have more support options for compact smartphones.

4. Better REM Sizing and Larger Fonts

For many developers, this will be the most confusing change to the Bootstrap 4 system. The first thing you should know is that you can still use all your old sizing options for typography – so nothing has to change unless you want it too. However, if you want to upgrade, then you can do so with the REM unit of measurement. The reason to switch to REM is that it can make it easier to scale your font up and down to suit different devices. You can basically change the HTML tag using media queries to scale to larger or smaller font sizes for any device.

5. New Cards

The “Cards” option replaces the old wells and panels that were available with Bootstrap 3. Cards are basically an extensible and flexible container for content that includes options to help you customise your own footers and headers. There’s also the option to change different elements like display options and contextual background colours. Essentially, they’re just individual content blocks that come with various out-of-the-box options for personalisation.

6. No Support for IE8

With Bootstrap 4, support for Internet Explorer 8 was officially dropped. This means that you can take advantage of all the best elements of a CSS framework without having to worry about fallbacks and hacks. It also means that people maintaining their developments can focus on new technologies and less on solutions from the past.

7. Reboot

Finally, the newest rest file in the Bootstrap 4 upgrade is “Reboot”. This basically takes Normalize’s standard reset options which only work with element selectors, then builds on it with specific class-based reset styles. This gives you a wider range of options when you want to change or reboot certain aspects of your design. You’ll find things like bordered tables, and tables in the mix.