Backlit Keyboard in the dark

Migrating from Bootstrap v3 to v4

So I guess that many are still using Bootstrap v3 as I did on this site. It’s a hassle and testing to update a larger site that has a lot of different types of content and still maintaining the same layout.

My site isn’t that large and doesn’t have many different pages or content types so it’s a lot easier to upgrade to Bootstrap v4. Still it needs testing and some adoption of both the HTML-templates but also modifications to the CSS and Javascripts since the structure and selectors in the HTML is changed.

As the site was based on a template that did most of the customization in CSS not using behavioural classes I wanted to adjust so that the site was using more of the supplied styling support provided by Bootstrap v4.

I started out by reading the documentation on how to upgrade at Migrating to v4. After changing so that the site was using Bootstrap v4 in my local development environment I searched for every selector (or class) that was changed. I changed it to the as was recommended in the migration document. If the visual appearance was altered I also modified the CSS to match the previous design.

The classes that I found in my HTML that was changed was:

Bootstrap v3 class Bootstrap v4 class
.navbar-default .navbar-dark
.navbar-toggle .navbar-toggler
.img-responsive .img-fluid
.label label-default .badge badge-dark
.img-circle .rounded-circle
.col-xs-* col-sm-*
.form-group .help-block .form-group .form-text

I also added .list-inline-item to the child elements for the .list-inline. The script that handles the clicks on the hamburger menu that shows and hides the menu was also adjusted since the top navigation was using different classes.

When I was satisfied with the migration I started to modify the template so the elements are using more of the provided layout and styling capabilities from Bootstrap v4 but that’s a different topic.

 2020-12-05  2 minutes