Bootstrap 4 What’s New

Web designers’ community has been waiting long for the release of the stable version of Bootstrap 4 and it is finally rolled out. Since Mark Otto announced Bootstrap 4 in 2014, we were expecting the release anytime soon but it took years to get the stable version finally. Designers across the world are curious about the Bootstrap $ and what’s new in it.

Bootstrap 4 is included lots of amazing features and incorporated latest CSS3 features like flex-box layout module. The team behind Bootstrap made over 4,000 commits in the GitHub to make the final version.

There are lots of breaking changes in version 4 compared to version 3. Here is a list what’s new in the Bootstrap 4 and this would help you to understand the Bootstrap 4 better. Remember, you are expected to have basic knowledge of Bootstrap 3 to understand what is discussed below.

Moved from LESS to SASS

Until version 3, Bootstrap used LESS precompiler but for version 4, it moved to SASS. Moreover, SASS is more popular than LESS and it might be one reason why Bootstrap made this change. This move helps Bootstrap to load faster than before.

Improved Grid System

The underlying architecture of the Bootstrap has fundamentally changed but we can’t see it at the first glance.

Flex-box Layout Module

 After flex-box many designers stopped using Bootstrap altogether because it made the job a lot easier. Now Bootstrap has integrated flex-box module into it which makes the Bootstrap lot more powerful. Now it has become easier for the Bootstrap to make equal length columns.

For every flex-box behavior like the direction, alignment and justification of content, wrap and order, there are classes which can be added to the flex-box container. It makes the job of the designer to set further properties and values for the flex container obsolete. Just adding the right classes to the container would make the layout the way we want. It is super cool. 

Moreover, like all other classes, flex-box classes also have responsive variations.

REM/EM instead of PX

Bootstrap 4 uses EM and REM units instead of PX. These two units have become more popular among the web designers with the responsive web design and Bootstrap also embraced it.  

–xl : Additional Breakpoint Tier for Responsiveness

In the responsive syntax, Bootstrap 4 included –xl for extra large screens. Earlier we had –sm for small screens, -md for medium screens and –lg for the large screens. The –xl tier for extra large screens would be useful for retina displays with huge resolution.

The position if the keyword “offset” in the class name for column divs has moved from the first to the second now. Now you would have to use col-offset-md-4 instead of offset-col-md-4.

Design Changes

Reboot.css

Reboot.css file takes the reset styles from old normalizer.css and also includes several new features. The changes to each HTML element are included in a single file. This provides a consistent baseline for the designer to build upon.

Buttons

For buttons, Bootstrap 3 gave a subtle gradient but in Bootstrap 4, there is clear background and a colored outline. The design is simple but it is a lot better than the old button style.

Change Font Sizes

The global font size is changed from 14 px to 16 px. Most of the designers and browsers use 16 px as the global font size but Bootstrap used 14 px until now. However, Bootstrap now followed the popular size with the Bootstrap 4.

There are also changes in the font-size of all heading tags.

Card Class

The card is a new concept in the Bootstrap 4 and replaces Panel, Well and Thumbnail classes we used in the previous versions. The card is more semantic and easier to understand. It is a flexible container and it can contain images, body, links, and buttons. With this feature, you can easily create cards in the design.

Moreover, the card layout is achieved using flex-box and therefore we get better results using .card classes.

The .card class can be applied to a container which may include images, titles, paragraphs, and links. Each type of content is wrapped inside a div and gives it particular classes. For example, you can use .card-img-top which is almost equivalent to .thumbnail class in the earlier versions. Similarly you can have .card-body and .card-title and .card-text inside .card-body.

Old Browser Support

Bootstrap 4 dropped the support for Internet Explorer 8 and 9 and IOS 6 and below. The biggest advantage of Bootstrap was its browser compatibility. However, it has now dropped its support to very old browsers. This gives Bootstrap the freedom to include a lot of new CSS3 features which make Bootstrap 4 very powerful.

Navigation Bar

Bootstrap 4 uses flex-box for the navigation. Now we don’t have to use the .nav base class for the <nav> element anymore. Moreover, the style applied to .navbar-toggleable in earlier version is now attached to the .nav-bar.

Moreover, we can now create a navigation bar without using <ul> and <li> tags. Instead of <ul> we can use a <div> container and apply .navbar-nav class to it and put some links with .nav-item and .navlink classes to the <a> tag. Thanks to the flex-box.

All these make the HTML a lot more clutter free.

Form

We can control the width of input fields in different screen sizes using the .form-control-sm or .form-control-lg. This would increase or decrease the size fields.

We would have to use the .form-text class to get the help text inside an input field. Earlier we used .help-block to achieve this effect.

We can also use .col-form-label for labels which would align the labels in a grid. We have to use the .row class for the container to get the labels and inputs in horizontally.

JavaScript

It is reported that all plugins have been re-written with ES6 syntax. The new version takes full advantage of new JS features and enhancements. Bootstrap 4 now supports JQuery 2.0 which is also great.

Dropped Glyphicons

Although Bootstrap dropped glyphicons in the version 4, it won’t be a big problem for the designers. Most of us prefer to use font-awesome and therefore this is not an issue. On the positive side, this helped to reduce the size of Bootstrap documents and it would load faster. Bootstrap 4(88KB) is 30% lighter than Bootstrap 3(123KB).

The major shifts in the Bootstrap 4 helped Bootstrap to include lots of new cool features. Bootstrap decided to drop the support for old browsers and tried best to incorporate more advanced features.