In this article by Matt Lambert, the author of the book Learning Bootstrap 4, has covered how to migrate your Bootstrap 3 project to Version 4 of Bootstrap is a major update. Almost the entire framework has been rewritten to improve code quality, add new components, simplify complex components, and make the tool easier to use overall. We’ve seen the introduction of new components like Cards and the removal of a number of basic components that weren’t heavily used. In some cases, Cards present a better way of assembling a layout than a number of the removed components. Let’s jump into this article by showing some specific class and behavioral changes to Bootstrap in version 4.
(For more resources related to this topic, see here.)
Browser support
Before we jump into the component details, let’s review the new browser support. If you are currently running on version 3 and support some older browsers, you may need to adjust your support level when migrating to Bootstrap 4. For desktop browsers, Internet Explorer version 8 support has been dropped. The new minimum Internet Explorer version that is supported is version 9.
Switching to mobile, iOS version 6 support has been dropped. The minimum iOS supported is now version 7. The Bootstrap team has also added support for Android v5.0 Lollipop’s browser and WebView. Earlier versions of the Android Browser and WebView are not officially supported by Bootstrap.
Big changes in version 4
Let’s continue by going over the biggest changes to the Bootstrap framework in version 4.
Switching to Sass
Perhaps the biggest change in Bootstrap 4 is the switch from Less to Sass. This will also likely be the biggest migration job you will need to take care of. The good news is you can use the sample code we’ve created in the book as a starting place. Luckily, the syntax for the two CSS pre-processors is not that different. If you haven’t used Sass before, there isn’t a huge learning curve that you need to worry about. Let’s cover some of the key things you’ll need to know when updating your stylesheets for Sass.
Updating your variables
The main difference in variables is the symbol used to denote one. In Less we use an @ symbol for our variables, while in Sass you use the $ symbol. Here are a couple of examples for you:
/* LESS */
@red: #c00;
@black: #000;
@white: #fff;
/* SASS */
$red: #c00;
$black: #000;
$white: #fff;
As you can see, that is pretty easy to do. A simple find and replace should do most of the work for you. However, if you are using @import in your stylesheets, make sure there remains an @ symbol.
Updating @import statements
Another small change in Sass is how you import different stylesheets using the @import keyword. First, let’s take a look at how you do this in Less:
@import "components/_buttons.less";Now let’s compare how we do this using Sass:
@import "components/_buttons.scss";As you can see, it’s almost identical. You just need to make sure you name all your files with the .scss extension. Then update your file names in the @import to use .scss and not .less.
Updating mixins
One of the biggest differences between Less and Sass are mixins. Here we’ll need to do a little more heavy lifting when we update the code to work for Sass. First, let’s take a look at how we would create a border-radius, or round corners, mixin in Less:
.border-radius (@radius: 2px) {
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
In Less, all elements that use the border-radius mixin will have a border radius of 2px. That is added to a component, like this:
button {
.border-radius
}
Now let’s compare how you would do the same thing using Sass. Check out the mixin code:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
There are a few differences here that you need to note:
- You need to use the @mixin keyword to initialize any mixin
- We don’t actually define a global value to use with the mixin
To use the mixin with a component, you would code it like this:
button {
@include border-radius(2px);
}
This is also different from Less in a few ways:
- First, you need to insert the @include keyword to call the mixin
- Next, you use the mixin name you defined earlier, in this case, border-radius
- Finally, you need to set the value for the border-radius for each element, in this case, 2px
Personally, I prefer the Less method as you can set the value once and then forget about it. However, since Bootstrap has moved to Sass, we have to learn and use the new syntax. That concludes the main differences that you will likely encounter. There are other differences and if you would like to research them more, I would check out this page:
Additional global changes
The change to Sass is one of the bigger global differences in version 4 of Bootstrap. Let’s take a look at a few others you should be aware of.
Using REM units
In Bootstrap 4, px has been replaced with rem for the primary unit of measure. If you are unfamiliar with rem it stands for root em. Rem is a relative unit of measure where pixels are fixed. Rem looks at the value for font-size on the root element in your stylesheet. It then uses your value declaration, in rems, to determine the computer pixel value. Let’s use an example to make this easier to understand:
html {
font-size: 24px;
}
p {
font-size: 2rem;
}
In this case, the computed font-size for the <p> tag would be 48px. This is different from the em unit because ems will be affected by wrapping elements that may have a different size. Whereas rem takes a simpler approach and just calculates everything from the root HTML element. It removes the size cascading that can occur when using ems and nested, complicated elements. This may sound confusing, but it is actually easier to use em units. Just remember your root font-size and use that when figuring out your rem values.
What this means for migration is that you will need to go through your stylesheet and change any px or em values to use ems. You’ll need to recalculate everything to make sure it fits the new format if you want to maintain the same look and feel for your project.
Other font updates
The trend for a long while has been to make text on a screen larger and easier to read for all users. In the past, we used tons of small typefaces that might have looked cool but were hard to read for anyone visually challenged. To that end, the base font-size for Bootstrap has been changed from 14px to 16px. This is also the standard size for most browsers and makes the readability of text better. Again, from a migration standpoint, you’ll need to review your components to ensure they still look correct with the increased font size. You may need to make some changes if you have components that were based off the 14px default font-size in Bootstrap 3.
New grid size
With the increased use of mobile devices, Bootstrap 4 includes a new smaller grid tier for small screen devices. The new grid tier is called extra small and is configured for devices under 480px in width. For the migration story this shouldn’t have a big effect. What it does do is allow you a new breakpoint if you want to further optimize your project for smaller screens.
That concludes the main global changes to Bootstrap that you should be aware of when migrating your projects. Next, let’s take a look at components.
Migrating components
With the release of Bootstrap 4, a few components have been dropped and a couple new ones have been added. The most significant change is around the new Cards component. Let’s start by breaking down this new option.
Migrating to the Cards component
With the release of the Cards component, the Panels, Thumbnails, and Wells components have been removed from Bootstrap 4. Cards combines the best of these elements into one and even adds some new functionality that is really useful. If you are migrating from a Bootstrap 3 project, you’ll need to update any Panels, Thumbnails, or Wells to use the Cards component instead. Since the markup is a bit different, I would recommend just removing the old components all together, and then recode them using the same content as Cards.
Using icon fonts
The Glyph-icons icon font has been removed from Bootstrap 4. I’m guessing this is due to licensing reasons as the library was not fully open source. If you don’t want to update your icon code, simply download the library from the Glyph-icons website at: http://glyphicons.com/
The other option would be to change the icon library to a different one like Font Awesome. If you go down this route, you’ll need to update all of your <i> tags to use the proper CSS class to render the icon. There is a quick reference tool that will allow you to do this called GlyphSearch. This tool supports a number of icon libraries and I use it all the time. Check it out at: http://glyphsearch.com/.
Those are the key components you need to be aware of. Next let’s go over what’s different in JavaScript.
Migrating JavaScript
The JavaScript components have been totally rewritten in Bootstrap 4. Everything is now coded in ES6 and compiled with Babel which makes it easier and faster to use. On the component size, the biggest difference is the Tooltips component. The Tooltip is now dependant on an external library called Tether, which you can download from: http://github.hubspot.com/tether/.
If you are using Tooltips, make sure you include this library in your template. The actual markup looks to be the same for calling a Tooltip but you must include the new library when migrating from version 3 to 4.
Miscellaneous migration changes
Aside from what I’ve gone over already, there are a number of other changes you need to be aware of when migrating to Bootstrap 4. Let’s go through them all below.
Migrating typography
The .page-header class has been dropped from version 4. Instead, you should look at using the new display CSS classes on your headers if you want to give them a heading look and feel.
Migrating images
If you’ve ever used responsive images in the past, the class name has changed. Previously, the class name was .image-responsive but it is now named .image-fluid. You’ll need to update that class anywhere it is used.
Migrating tables
For the table component, a few class names have changed and there are some new classes you can use.
If you would like to create a responsive table, you can now simply add the class .table-responsive to the <table> tag. Previously, you had to wrap the class around the <table> tag. If migrating, you’ll need to update your HTML markup to the new format.
The .table-condensed class has been renamed to .table-sm. You’ll need to update that class anywhere it is used.
There are a couple of new table styles you can add called .table-inverse or .table-reflow.
Migrating forms
Forms are always a complicated component to code. In Bootstrap 4, some of the class names have changed to be more consistent. Here’s a list of the differences you need to know about:
- control-label is now .form-control-label
- input-lg and .input-sm are now .form-control-lg and .form-control-sm
- The .form-group class has been dropped and you should instead use .form-control
You likely have these classes throughout most of your forms. You’ll need to update them anywhere they are used.
Migrating buttons
There are some minor CSS class name changes that you need to be aware of:
- btn-default is now .btn-secondary
- The .btn-xs class has been dropped from Bootstrap 4
Again, you’ll need to update these classes when migrating to the new version of Bootstrap. There are some other minor changes when migrating on components that aren’t as commonly used. I’m confident my explanation will cover the majority of use cases when using Bootstrap 4. However, if you would like to see the full list of changes, please visit: http://v4-alpha.getbootstrap.com/migration/.
Summary
That brings this article to a close! Hope you are able to migrate your Bootstrap 3 project to Bootstrap 4.
Resources for Article:
Further resources on this subject:
- Responsive Visualizations Using D3.js and Bootstrap [article]
- Advanced Bootstrap Development Tools [article]
- Deep Customization of Bootstrap [article]
