Upgrading from Bootstrap V3 to Bootstrap V4

Sharing is Caring !

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 ,
  1. V4 has 5 tier grid system(xs, sm, md, lg, xl).
  2.  V4 Uses offset-*-* classes to offset columns where as v3 used col-*-offset-*
  • In tables ,
  1. 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.
  2. 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.
  3. V4 has added reflow tables with the .table-reflow class.
  4. In forms,
  5.  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,
  1. V4 uses .form-check, .form-check-label, .form-check-input, .form-check-inline.
  • In form control size,
  1. V4 uses .form-control-lg and .form-control-sm to increase or decrease the size of an input control.
  • In form help text
  1. Bootstrap 4 uses the .form-textclass to display help text
  • In Validation and Feedback Icons
  1. V4 has dropped the .has-feedback class. It is no longer required with the introduction of the. form-control classes.
  • In buttons,
  1. Introduced the .btn-secondary class. Dropped the .btn-default class.
  2. Introduced the .btn-outline-* classes for styling buttons with an outline color
  3. Dropped the.btn-xs class.
  • In images,
  1. V4 Uses .img-fluid  class for making responsive.
  • In Linked List Items / Button List Items,
  1. V4 applies .list-group-item-action to the<a>element.
  • . In Blockquotes
  1. Introduced the .blockquoteclass for styling the <blockquote> element.
  • In Navbars
  1. New color options are included in V4. Introduced the .bg-*class, as well as the.navbar-light and .navbar- classes.
  2. Used the various .pull-*-right and .pull-*-leftresponsive helper classes for navbar allignment
  3. Bootstrap 4 dropped thelass.
  • In carousel
  1.  V4 uses .carousel-item class

 

ZenRays provide the following to make you expert

  • 1Fully practical and project based sessions from first class.
  • 2Training by Experienced Consultants, not regular Trainers
  • 3Friendly and enthusiastic faculty to clear your doubts 24X7
  • 4Free 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

Sharing is Caring !