My experiences using Bootstrap 4 vs Bootstrap 3 : A review - Andy Fairlie - Full Stack Web Developer

Things I love!

Overall, version 4 just feels more modern, with better classnames, usage of SASS functions, code structure, only to mention a few features. I have integrated it into my Sesha WordPress development theme, and working with older projects using ver 3.3.7 just feels antiquated, particularly the variable names for things.

Here is a run down of the things I love, and hate, about Bootstrap 4.0.

A more modern CSS framework

Bootstrap 4.0 just feels more up to date, with modern techniques and philosophy about how websites should be built. I like their approach with this new version, I found myself battling against version 3.3.7 often, often rewriting modules to better suit my techniques.

By the time I migrated to 4.0, so much of my boilerplate Bootstrap code was a far cry from the original. It really is just a culmination of small things, which make the framework better, like margins declare on the bottom of elements only and utility classnames used over tags in CSS selectors.

Variable names and variable maps

Much has changed between versions 3 and 4, for a start the variable names are more concise and have been cleaned up a bit. Instead of $brand- for the main colors, this redundant prefix has been removed, thankfully.

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

You still use the variables.scss file to control your theme in one location, which I really enjoy. The use of !default is a master stroke. In my stylesheet setup, I import the bootstrap 4.0 core after my custom variables and mixins. I can copy out variables I want to change, and not edit the base Bootstrap code. This means I have an upgrade path for future Bootstrap 4.x versions.

/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
 
 // Core variables and mixins
@import "bootstrap-4.0/functions";
@import "bootstrap-custom/variables";
@import "bootstrap-4.0/variables";
@import "bootstrap-custom/mixins"; 
@import "bootstrap-4.0/mixins";

// rest of my imports follow...

Sass maps, as first glance, look a bit funky. I puzzled over their usage until I read this article on TutsPlus

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

$grays: () !default;
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

What is cool is that you can loop over items in the map, like this example below from the TutsPlus Article. You can create classes from items inside the map. An example of this in Bootstrap 4.0 is how they create the various button’s using the $theme-colors map. You can easily remove button classes now, by just removing items from this map.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

Options are now available for visuals : like carets, rounded corners, shadows, transitions. Very clever, and well thought out.

$enable-caret:              true !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        true !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

Breakpoints and media queries

This is another massive improvement. Breakpoints are now done using various mixins, to target screen sizes up, down and between preset screen size variables. Just pass in the breakpoint variable you want to taget.

@include media-breakpoint-up(sm) { ... } // From SM up
@include media-breakpoint-down(md) { ... } // From MD down
@include media-breakpoint-only(lg) { ... } // Only for LG
@include media-breakpoint-between(md, xl) { ... } // Between MD and XL

By default, Bootstrap uses a mobile first approach, so utility classes work upwards in screen size from XS towards XL. You now have more flexibility with your custom SASS to target specific breakpoints.

Spacers

This is very useful. I used to use a similar technique for adding margins to elements, but Bootstrap has expanded on this concept with very useful utility classes. You can set a base spacing, the default being 1rem unit. There are 5 spacings in all, which are used in the various spacer classes, at different media queries.

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

For example:

<div class="mb-5" /> /* A large margin bottom */

<div class="px-5" /> /* A large padding on the left and right only */

<div class="mt-md-2" /> /* A smaller top margin only for MD breakpoints */

<div class="py-lg-5 py-sm-2" /> /* Large padding on the top and bottom for LG breakpoints, and smaller paddings for SM breakpoints */

Flexbox grid and utility classes

Same syntax as the previous version, now with Flexbox goodness! Use in the same way as before, but now you get equal column heights ‘out of the box’ as well as column re-ordering and all the other features you get with Flexbox.

I like that more use of display: flex; has been across the board for all Bootstrap modules. For example, the .nav utility class uses flexbox now. This means we get cleaner code, leveraging the power of Flexbox properties.

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-fill {
  .nav-item {
    flex: 1 1 auto;
    text-align: center;
  }
}

.nav-justified {
  .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
}

Fonts Stack and Typography

This is a massive improvement. I really like that they are using the system font stack as a base font.

$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

In general, the type.scss file is much more concise and cleaner. I like that there are utility classes for display headings, as well as default heading tags. Thankfully, margins are now declared in one direction, so no margin stacking anywhere.

Things I don’t love so much…

Overall, I cannot gripe too much. I find working with 4.0 far more natural and easier.

Migration

Yeah, this was a pain and not as easy as I thought. To be honest, I didn’t expect a drop in solution. I spent a solid weekend upgrading my Sesha WordPress theme to the latest version of Bootstrap. Most of the consternation was around the new variable names, but that was fixed using a find and replace generally. But if you have alot of custom overrides and variables, this can take some time and sanity checking.

Form elements styles

This is a bugbear of mine, but I understand why they followed this approach.

Classnames are used for everything, and styling of tags is avoided. However I believe there are some exceptions, especially when you don’t have direct control of HTML that is generated by CMS’s like WordPress. To style a form input element, you have to use the classname of .form-control. All good and well, but generally you want all form elements to be styled the same way and use modifier classes to tweak their styles.

This is the approach I use, but it does have caveats :

.form-control,
input[type=search],
input[type=email],
input[type=tel],
input[type=password], 
input[type=text], 
input[type=file], 
textarea,
select {
  display: block;
  width: 100%;
  padding: $input-padding-y $input-padding-x;
  font-size: $font-size-base;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-clip: padding-box;
  border: $input-border-width solid $input-border-color;
  // ....

I am using attribute selectors to target specific input types, which means by default these elements are styled, but this also adds a level of specificity when add custom styles or modifiers. Honestly though, this doesn’t really bother me as it does not occur often. I dont style the input tag, as this will also affect buttons that are used as input elements of type=”button” as well as radios and checkboxes. Those I style separately.

Masthead Navbars

As in the previous version, I just remove the navbar.scss import and use my own custom code instead. I find that with the sites I build, the header is always different and custom, and I just dont use the standard Bootstrap style of masthead. Not a fault of Bootstrap, I just don’t have need of their code in this regard.