Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

What is new in Bootstrap 4

Friday, October 7th, 2016 by Servage

Bootstrap4Bootstrap 4 has been in public alpha since August 2015. Some deem it stable enough while other developers are waiting for a more stable release. Whether or not you are moving to the next version just yet, it is good to be aware of the upcoming changes. In fact, Bootstrap 4 has quite a lot of new and interesting updates to offer!

Introducing Cards

Cards are a new type of container in Bootstrap 4. They are meant to replace panels, wells and thumbnails. That’s a lot for one component to replace, but cards are designed to be a combination of all these three components. A card has a panel-like heading and a content area that looks similar to the body of a panel. Cards also support images, and they look a little like thumbnails embedded to panels. By combining these three components into a single flexible component, Bootstrap aims to reduce the amount of similar container components.

From Less to Sass

This is also a major change but only for those who use a CSS preprocessor with Bootstrap. From now on, the CSS style sheets are transpiled using Sass. However, you can always keep using the transpiled CSS files if that is how you have worked with Bootstrap in the past.

Grid changes

This is a change that will surely affect all Bootstrap developers. The sizes of grid columns have changed, and one new column size has been added: extra large. This change was made to better support very small devices. As a result, all grid sizes from extra small to extra large has had their widths changed. The extra small grid used to be 768px wide, but in version 4 it is only 544px. The largest size is still 1200px but has been renamed from large to extra large.

IE8 support dropped

To take advantage of more modern technologies, Bootstrap 4 had to drop support from Internet Explorer 8. If you still want to support IE8, the official suggestion is to keep using Bootstrap 3.

No more pixels

In version 4, element dimensions are defined using the em and rem units instead of pixels. This is also a relatively big change because pixels are absolute units and em and rem are relative units. One of the reasons for dropping Internet Explorer 8 support was because it does not support these units.

Optional Flexbox support

Flexbox is the future of centering and aligning content with CSS. Bootstrap 4 comes with opt-in support for Flexbox containers. However, the choice of freedom is only given to those who preprocess their CSS using Sass. To enable Flexbox support, you have to change a Flexbox boolean value and recompile your CSS style sheets. In the CSS version and CDN links, Flexbox support is not enabled yet, but this is likely to change in the future.

What is new in Bootstrap 4, 4.8 out of 5 based on 6 ratings
Categories: Software & Webapps

Keywords: , , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.