Bootstrap 4 Features – A Quick Primer

Bootstrap 4

Update Jan 22, 2016: This article was updated after the Boostrap 4 alpha 6 was released with quite a few changes including turning on flexbox by default.

The Bootstrap 4 CSS Framework is expected to be out very soon. I thought I might write a brief primer about the new features and functionalities that are introduced in the upcoming version of Bootstrap. Bootstrap 4 development was in it’s alpha 5 stage as I was writing this. The developers are hopeful of an initial beta release after alpha 6. I hope to keep this post updated as the development moves along.

Bootstrap CSS Framework

Originally released on August 2011, this CSS framework has come a long way since then. With each successive release the developers have been successful in greatly enhancing their offerings. The release of Bootstrap 3 saw a huge improvement over Bootstrap 2 embracing a flat design and introducing a much improved grid system.

For frontend developers, Internet Explorer support has always been a pain point. With each successive Bootstrap release the developers are trying to ease out support for older IE versions. Bootstrap 4 drops support for IE 8 entirely and now supports IE versions 9 and above. IE9 supports just enough CSS3 features to not be a major problem for developers. But one big sticking point is that IE9 does not support the game changing flexbox layout mode. Hence, flexbox support is optional in Boostrap 4. The developers dropped IE 9 support and turned on flexbox by default since alpha 6. Bootstrap 4 now officially supports IE 10+.

Bootstrap 4 development status

All though the docs aren’t complete as yet, the development is currently at alpha 5 6. Within the next couple weeks, we can expect an alpha 6 release. Alpha 6 was released on January 6, 2016. This will probably be quickly followed by the beta release after which there shouldn’t be much changes in the framework except for bug fixes and critical fixes. Bootstrap 4 also sees the developers moving away from LESS to SASS as the pre-processor.

Using rems

Bootstrap 4 also brings to us an improved grid system that is based on rems. Using rem instead of em allows the entire display to scale automatically on changing core variables. For example, changing the html font-size will automatically scale the whole page to correspond to the change in font size. Checkout the example below to get a better understanding.

See the Pen =Grid rem Demo by Nicholas Cerminara (@ncerminara) on CodePen.

The Flexbox in Bootstrap 4

Another major addition is that of the Flexbox. Flexbox allows matched heights of columns which is one of it’s biggest benefits. No longer would you have to use something like Match Height.

Flexbox

You can find many examples of Flexbox in this link: https://umaar.github.io/css-flexbox-demo/. A quick summary of some of the advantages of Flexbox are:

  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
  • Equal height and equal width cards
  • Vertical and horizontal centering without hardcoding values with translate or margin
  • Utility classes for easily (and responsively!) changing display, direction, alignment, and more
  • Auto margins for easy spacing
  • Justified navigation and button groups
  • No more HTML white space or broken table-style rendering

Bootstrap Cards

Panels and Wells from older Bootstrap versions are replaced by Cards in Bootstrap 4. But in practice, these cards can be used for a lot more than just replacing panels and wells. Cards have options to include headers and footers. Cards are also used to present a wide variety of content, contextual background colors, and powerful display options. Some examples of uses for Cards are shown below:

See the Pen Cards Demo by Nicholas Cerminara (@ncerminara) on CodePen.

Additional Improvements in Bootstrap 4

I outlined the main differences that can be seen in Bootstrap 4. Below I am listing some of the other significant changes I came across. Some of these require more elaboration but they might end up having a lot more changes before final release. I will probably explain these in greater detail in future posts.

  • Bootstrap 4 uses new code for resetting CSS styles called reboot.css.
  • There is ES6 Javascript support.
  • It is now safe to use jQuery 2.0+.
  • Integration of tether.js into tooltips and popovers to provide more accurate positioning.
  • Bootstrap 4 dropped glyphicons and now encourages font awesome or octicons.
  • Adding margin and padding can be done using new helper classes like ml-2 or mr-1.
  • Comprehensive list of SASS variables for quick & easy customization.
  • More robust, flexible and customizable Navbars.
  • Easily scale custom form controls as base64 PNG background images are replaced by inline SVGs.
  • The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a native font stack for optimum text rendering on every device and OS.

Leave a Reply

Your email address will not be published. Required fields are marked *