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.