How to update Bootstrap version?

Modyo offers many tools for accelerated digital channel creation. One of these tools is the Minimal Template, which is generated automatically when creating a new site. The Minimal Template was created to provide an agile way to create sites taking into account the best practices in web design. As part of this package, Bootstrap 4 is included, one of the most popular libraries among frontend developers.

With the rapid and continuous growth of the digital industry, new versions of Bootstrap are coming out and today we are going to see how to update this library, to its most recent version.

The first step is to understand how the Minimal Template contains a snippet called variables_css in which the values are going to fill our Bootstrap stylesheet. To perform a bootstrap update under these conditions we have two possible implementation paths:

- One is to edit variables_css

- The other is not to use the variable sheet and to use direct CSS and modify it.

For both cases, the first thing you have to do is replace the Bootstrap JS with the version you want to use.

1. In the platform, inside the site you want to update, click Templates.

2. Open the file bootstrap_js, there paste the javascript code of the latest version of bootstrap.

Then you can decide which option fits your needs best.

Option A: Update Bootstrap without variables

This option will take a fresh version of Bootstrap, without any integration with the Modyo template, this is a good option if you plan to start a project from scratch and implement your own style sheets.

Inside Templates, in the Snippets > Libs section, open bootstrap_css and replace the code with the stylesheet corresponding to the version of Bootstrap you want to implement.

Option B: Update Bootstrap with variables

This option is recommended if you already have a site implemented and you just want to update Bootstrap to its latest version or if you want to take advantage of Modyo's accelerated development by modifying variables that update the color palette with just a few value changes.

To use the variables we have to take the css sheet from the bootstrap CDN and paste it in your preferred editor. Find and replace the primary color (# 0d6efd) and change it to , this is the liquid variable that is defined in the variables snippet.

This process must be repeated with all the variables until all those found in the snippet are mapped.

After we have the stylesheet ready, in Modyo Platform, in Templates, open bootstrap_css and replace the code with our new sheet.

It is important to mention that the Minimal template was optimized for version 4 of Bootstrap. If there are changes in the grid or the way the helpers are written, the end result may be affected. In this case, we have to rewrite the code found inside the snippet in the Grids section, then you can use Site Preview to verify everything is working properly.

Photo by Josh Olalde on Unsplash.