Upgrading from Bootstrap V3 to Bootstrap V4

What is Bootstrap3?

To build mobile-friendly sites and applications, Bootstrap is the most popular front-end framework which has high quality HTML, CSS, andJavaScript. Version 3 of Bootstrap is a major change from all its past versions. It is a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs. Since Twitter Bootstrap 3 is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive.

Benefit of using it? Since the mobile technology grow hugely popular every year, making responsive websites and keeping up with the latest technologies is time consuming. It can be a piece of cake using bootstrap. It is very easy to get started.

The latest version of bootstrap is 4. There are many new things added.

In bootstrap 3, source CSS file was LESS but Bootstrap 4 uses SCSS which is a program written in Ruby that assembles CSS style sheets for a browser.
The primary CSS unit was px in bootstrap 3 but in V4 it is rem are flexible, scalable units which are translated by the browser into pixel values,1rem is 16px.
Global font size was 14px in V3, but 16px in V4
In grid system ,

V4 has 5 tier grid system(xs, sm, md, lg, xl).
V4 Uses offset-*-* classes to offset columns where as v3 used col-*-offset-*

In tables ,

V4 has added inverse tables with the .table-inverse class and table head styles with the .thead-default and .thead-inverse classes which was not supported by v3.
Bootstrap 3 doesn't use the .table- prefix for its contextual classes. Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active prefix for its contextual classes.
V4 has added reflow tables with the .table-reflow class.

In forms,

V4 dropped using .form-horizontal to display horizontal forms. It requires .row class while using grid. Bootstrap 4 uses .col-form-label when using grids for form layout. V3 Used .control-label when using grids for form layout.

In checkboxes and radio buttons,

V4 uses .form-check, .form-check-label, .form-check-input, .form-check-inline.

In form control size,

V4 uses .form-control-lg and .form-control-sm to increase or decrease the size of an input control.

In form help text,

Bootstrap 4 uses the .form-text class to display help text

In Validation and Feedback Icons,

V4 has dropped the .has-feedback class. It is no longer required with the introduction of the. form-control classes.

In buttons,

Introduced the .btn-secondary class. Dropped the .btn-default class.
Introduced the .btn-outline-* classes for styling buttons with an outline color
Dropped the .btn-xs class.

In images,

V4 Uses .img-fluid class for making responsive.

In Linked List Items / Button List Items,

V4 applies .list-group-item-action to the<a>element.

In Blockquotes,

Introduced the .blockquoteclass for styling the <blockquote> element.

In Navbars,

New color options are included in V4. Introduced the .bg-* class, as well as the.navbar-light and .navbar- classes.
Used the various .pull-*-right and .pull-*-left responsive helper classes for navbar allignment

In carousel,

V4 uses .carousel-item class

ZenRays provide the following to make you expert

Fully practical and project based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience

If you want more details please visit us:

Zenrays.com Reach us at trainings@zenrays.com

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible