Browser Support Change

Now Bootstrap4 supports Internet Explorer 10+ and iOS 7+. And also it added official support for Android v5.0 Lollipop's Browser and WebView. But it dropped support for IE8, IE9 and iOS 6, if your application need support for IE8, IE9 and iOS6 then please use Bootstrap3.

Giant Move to Flexbox

CSS Flexible Box or Flexbox is a new layout mode of CSS3 which is used to alignment of items, specification of the layout direction and specification of layout order of items. Bootstrap v4 provides readymade CSS classes to apply in Flexbox layout elements.

New Improved Grid System

The Bootstrap grid system can have up to 12 columns, however improved Bootstrap v4 provides 5 grid tier systems like xs, sm, md, lg and xl. The main difference between Bootstrap v3 and Bootstrap v4 is that Bootstrap 4 now uses flexbox, instead of floats. Flexbox is that grid columns without a specified width will automatically layout as equal width and equal height. [Read More]

Media Queries

The @screen format is no longer available in Bootstrap 4. You can just use media queries easily as shown below:

/* Small devices (576px and up) */
@media (min-width: 576px) {  
/* Medium devices (768px and up) */
@media (min-width: 768px) {  
/* Large devices (992px and up) */
@media (min-width: 992px) { 
/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
[Read More]

Improved Form Support in Bootstrap v4

As we know Bootstrap provides several form control styles, layout options, and custom components for creating beautiful html forms. Bootstrap v4 form controls expand on our Rebooted form styles with modified classes. Like

.control-label is now .col-form-label
.input-lg and .input-sm is now .form-control-lg and .form-control-sm
.form-group-* classes are now .form-control-* classes.
.checkbox and .radio classes have changed to .form-check and the various .form-check-* classes.

Few removed classes

.radio-inline, .checkbox-inline, .col-form-legend

[Read More]

New Card Components

Panels, thumbnails, and wells classes are no longer available in Bootstrap v4. Now Bootstrap v4 provides new improved card component built with Flexbox. The card component provides a flexible and extensible content container with multiple variants and options. It includes options for headers, footers, contextual background colours and powerful display options. [Read More]

REM in Please of Pixels

In all places apart from media queries, Bootstrap v4 has dropped pixels in favour of relative units of measurement like rems. This makes the whole thing more scalable.

Spacing Utilities

Bootstrap includes a plethora of shorthand responsive margin and padding utility classes to modify an element’s appearance. This simply works by assigning responsive-friendly margin or padding values to an element with shorthand classes.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Other Updates:

  • The global font-size has been increased from 14px to 16px.
  • The primary CSS unit is now rem instated of px. However, pixels are widely used for media queries.
  • Glyphicons icon font are no more available in Bootstrap v4
  • Affix JQuery library is no more available in Bootstrap v4