Migrating from Bootstrap 3 to Bootstrap 4

March 25, 2018 in Web Design

About


Bootstrap, the most popular mobile-first, front-end framework provides a quick and effective way to build websites and web applications. It provides a CSS template for essential HTML elements like typography, forms, buttons, navigation, tables, modals, carousels, alerts, and many others, and a quick and easy jQuery-based library to build components like dropdowns, accordions, naviagtions, popovers, tooltips, carousels, modals, and more.

This post will assume that you have had some experience with any of the previous versions of Bootstrap as it will focus mostly on the main differences between Bootstrap 3 and the new Bootstrap 4 and the advantages of migrating over.

The Differences

The most recent, stable version of Bootstrap 4, Bootstrap v4.0, was released at the end of January, 2018 after years of development. The Bootstrap team had released a few versions of Bootstrap v4 alpha and a version of Bootstrap 4 beta before the final, stable version was released. Bootstrap v4.0 has a fair amount of differences from its predecessor Bootstrap v3.3.7, some of which will be laid out below.

Components Bootstrap 3 Bootstrap 4
Global
CSS Preprocessors LESS SASS
CSS Units px rem
Media Query Units px px
Base Font Size (Global) 14px 16px
Default Font-Family Helvetica Neue, Helvetica, Arial, sans-serif Native font stack on users system for both sans-serif and monospace fonts. The fallback is Helvetica Neue, Helvetica, Arial, sans-serif.
Grid System
Tiers 4-tier grid system (xs, sm, md, lg). .col-xs-* covers all responsive breakpoints 5-tier grid system (xs, sm, md, lg, xl). .col-* covers all responsive breakpoints.
Variable Column Width Not supported Setting one columns with with .col-* automatically sets the remaining columns width using .col
Alignment Not supported Flexbox utilities allow for vertical alignment for all columns within a .row .align-items-*, For example, .row .align-items-center, while vertical alignment of a single column can be set with .col-*-* .align-self-*, for example, .col-5 .align-self-end
Column Offsets .col-*-offset-* allows for offseting of columns. For example, .col-lg-offset-4 .offset-*-* allows for offseting of columns. For example, .offset-sm-3
Column Reordering Columns are reorderd with .col-*-push-* and .col-*-pull-*. For example, .col-lg-push-6 .col-lg-pull-6. Columns are reordered with flexbox using .col-* .order-*. For example, .col-4 .order-3.
Utilities
Hiding Content Used .hidden-* for hiding content, i.e. display: none; Uses responsive utilities for display. For example .d-none hides content on all breakpoint. Hiding content on large screens only requires .d-none .d-lg-block. Also added all display properties, i.e. .d-block .d-inline-block .d-inline .d-flex.
Horizontal Alignment Uses .center-block for horizontal centering of elements with display: block; Uses .mx-auto for horizontal centering of elements with display: block;
Responsive Margins and Padding Not supported Uses various margin (.m-* .mt-* .mb-* .ml-* .mr-* .mx-* .my-*) and padding (.p-* .pt-* .pb-* .pl-* .pr-* .px-* .py-*) classes, which can be adjusted in the source files. Responsive classes can be added using .p-*-* or .m-*-*. For examle, .mx-lg-5
Buttons
Contextual Classes Uses .btn-default .btn-primary .btn-info .btn-warning .btn-danger .btn-success .btn-active Uses .btn-primary .btn-secondary .btn-info .btn-warning .btn-danger .btn-success .btn-active
Button Sizes Uses .btn-xs .btn-sm .btn-lg (the default .btn is the base or medium-sized button) Dropped .btn-xs and now allows for .btn-sm .btn-lg (the default .btn is the base or medium-sized button)
Disabled Buttons Uses [disabled] Uses :disabled, which is suppored in IE9+. Fieldset[disabled] still exists.
Outlined Buttons Not supported Uses .btn-outline-* to create a button with a transparent background and a solid-colored border
Tables
Responsive Tables Uses .table-responsive which must be added a parent div element. Uses .table-resonsive-sm .table-responsive-md .table-responsive-lg .table-responsive-xl.
Table Header Styles Not supported Uses table header styles with .thead-light and .thead-dark
Contextual Classes Does not use the table-* prefix. For example, .info Uses the table-* prefix. For example, .table-info
Inverse Tables Not supported Uses dark/inverse tables with .table-dark
Condensed Tables (tables with less padding) Uses .table-condensed Uses .table-sm

The Advantages of Migrating to Bootstrap 4

Bootstrap 3 and 4 are similar in most respects. The main advantage, however, lies in the new and updated flexbox layout utilities that Bootstrap 4 offers. While flexbox isn't exactly easy to learn, once mastered, it will open the doors to many different layout possibilites that were nearly impossible without it. We highlighy reccomend taking a look at this page, which gives you a complete and thorough rundown of how to use flexbox and th advantages it provides.