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.
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.
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]
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]
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.
.radio-inline
, .checkbox-inline
, .col-form-legend
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]
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.
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.