Bootstrap 4 Is On The Way - What's So New?

What we have on stream is Bootstrap version 4 - but it’s still work in progress! The first alpha of Bootstrap v4 was released in August 2015. Since this launch it’s safe to say it’s still very much a work in progress, and was last updated in January 2017.

A brief overview of Bootstrap

Bootstrap is an open sourced front-end web framework with sample code and templates. It allows developers to speed up development workflow and build websites at a quicker pace. Responsive is also available for devices. Bootstrap, previously known as Twitter Bootstrap, was first launched in 2011.

Core changes contained in Bootstrap v4

Bootstrap have made changes with v4. I’ll take you through some of the main points, and how these changes might impact your upcoming projects.

The big question - browser compatibility

IE8 and IE9 have been dropped - well overdue! The upcoming version of the framework is designed to be used with IE10 and above. The reason for this is layout changes in Bootstrap which will be handled by flexbox. Flexbox is a new feature of CSS properties which allows for easier structure of content layout. The layout has completely changed in quite significant ways! Popular browsers such as Google Chrome are in a position to support it with some exceptions.

Remember to upgrade your browser to the latest version for a more pleasing and functional website!

Sass or Less and Bootstrap theme

Bootstrap v4 have discontinued the use of Less language. This is mainly because Sass is being used on a wider scale by developers in recent years.

You will no longer be able to add effects such as gradient and drop shadows using Bootstrap Theme. This decision may have been made because it doesn’t match the current trends in design.

The new version of Bootstrap is smaller and simpler

There are a few reasons for this. Firstly, it no longer includes the Glyphicon set that used to come with the framework. So if you're used to Glyphicons, you'll have to find a better solution yourself. Not to worry, there is an alternative to create the fonts with SVGs by using FontAwesome and then import into your Bootstrap project. This might be partially due to browsers’ capacities in using SVG format. It’s pretty good as that will give a clear vector and sharpness for high retina screens, tablets, and smartphones.

A major change is that the default measurement for the typography has been changed from pixel to rem units. A rem is a unit of measurement that is based on the root size of the document. In the older version of Bootstrap, the root size was 14 pixels; it is now being used up to 16px which is the default for the majority of browsers.

New breakpoint and grid

There are more classes that use the responsive breakpoints. There are classes which mean you don’t have to use different column layouts at different breakpoints. It allows you to set display parameters and other spacing attributes using these different breakpoints.

Also in the new breakpoint of Bootstrap - along with SM, MD, LG, there is a new breakpoint called XL for extra large sizes. The breakpoints have shifted over so that the XL breakpoint is the same as the old LG breakpoint. There's a XS breakpoint via Bootstrap 3 but there is no longer a use for Bootstrap 4; however this will become the default, e.g. .col-xs- to .col-.

This class has become the COL. If we take a look at the new grid version versus the old grid, you'll notice that the new breakpoint is called COL-XL. It is the same size as the COL-LG breakpoint - 1,200 pixels. Some of the other breakpoints have shifted over, and we have now have a new breakpoint at 576 pixels. See the tables below for comparison.

Bootstrap 3 Extra Small Small Medium Large
Break <768px >768px >992px >1200px
Width Auto 750px 970px 1170px
Class .col-xs- .col-sm- .col-md- .col-lg-
Bootstrap 4 Extra Small Small Medium Large Extra Large
Break <576px >576px >768px >992px >1200px
Width Auto 540px 720px 940px 1140px
Class .col- .col-sm- .col-md- .col-lg- .col-xl-

New components and changes

There aren’t many changes regarding components in v4, although most components have been affected by the new feature to amend the layout structure such as Flexbox.

The new components called Cards allows a much more comprehensive full layout pattern. That means we’ll be saying goodbye to panels, thumbnails and wells.

The jQuery plugin that used to be called Affix has been dropped from the library. It was a JavaScript component to add content stick on the scroll. Bootstrap v4 have introduced a new class called Sticky Top. When scrolling down, the navigation will pop up. If your browser support is currently not very good, third party libraries can take care of this. However, future browser support will be improved and you might not need this for long.

Conclusion

Bootstrap v4 is not a major release in rewriting the framework. What it is a completely new rethinking is how to manage your page layouts. It’s worth keeping in mind that Bootstrap v4 have stated that they are currently developing the Alpha label. Bootstrap v3 can’t be shelved just yet.

I hope you have enjoyed reading about the upcoming version of Bootstrap. Webfactory are always looking for what's around the corner and forward thinking on keeping up to date with latest trends in web development. Our thinking can make a positive impact on the development of your projects. Don’t forget, Webfactory are here to help! If you are looking for your website to be upgraded, get in touch at hello@webfactory.ie.

Image

Ronan Lowry

Web Developer

The author

Ronan is a Web Developer at Webfactory, with over 10 years working within the digital media industry. Ronan has an interest in all areas of digital matters including a variety of threads on web design/development and digital marketing.

Share if you like this