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|
|Bootstrap 4||Extra Small||Small||Medium||Large||Extra Large|
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.
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 firstname.lastname@example.org.