+91 99674 50288

Changes in Bootstrap 4 Beta

Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components

Browser support

  1) Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

  2) Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.

Global changes

1) Flexbox is enabled by default. In general this means a move away from floats and more across our components.

2) Switched from Less to Sass for our source CSS files.

3) Switched from px to rem as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.

4) Global font-size increased from 14px to 16px.

5) Added a new grid tier for smaller devices at 576px and below (our new xs tier).

6) Replaced the separate optional theme with configurable options via SCSS variables (e.g., $enable-gradients: true).

Grid system

1) Added support for flexbox in the grid mixins and predefined classes.

2) As part of flexbox, included support for vertical and horizontal alignment classes

3) Overhauled grid mixins to merge make-col-span into make-col for a singular mixin.

4) Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4).

5) Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by 12 at their max width.

6) Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpoints and $container-max-widths) instead of a handful of separate variables. These replace the @screen-* variables entirely and allow you to fully customize the grid tiers.

7) Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have @include media-breakpoint-up/down/only. Now, instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.