Updated: Some tips for upgrading Bootstrap from 3 to 4
Restructured the whole card and add some more suggestions for external libraries:
Here are some libraries that I had come across:
- you have to use at least version 4 to work with Bootstrap 4
Suggestion: Upgrade to a newer version before doing the Bootstrap upgrade and test if everything still works as expected. Here is a migration guide for Select2
Maybe you can find an alternative to Select2 if you want to go away from
- works only well BS 2+3, but not above
- there are some forks which say that they include a BS4 renderer, but they didn't work for me.
simple_navigation_renderersand implement the navigation on your own.
Tip: Add a feature for your navigation bar beforehand and test links and their highlighting (don't forget dropdown submenus!).
After upgrading to Bootstrap 4 you only have to adapt the html to its new structure
- won't work with Bootstrap 4
Suggestion: Replace the gem with will_paginate-bootstrap4 within the upgrade process.
You will have to update your helper toCopy
will_paginate(collection, renderer: WillPaginate::ActionView::BootstrapLinkRenderer, ...)
- still maintained but has no explicit stylesheet for Bootstrap 4
bootstrap-datepicker3.cssstylesheet looks ok, but does not support the bootstrap variables
Suggestion: If you don't use fancy datepickers you can use the old style. Otherwise you have to look for another datepicker or overwrite the styles by using bootstrap variables.
- no longer maintained
- has no explicit stylesheet for Bootstrap 4
bootstrap-clockpicker.cssstylesheet looks ok, but does not support the bootstrap variables
Suggestion: As for the datepicker. If you don't use fancy clockpickers you can use the old style. Otherwise you have to look for another clockpicker or overwrite the styles by using bootstrap variables.
Also updated the upgrade process part:
First you should include the new version into your project and replace the old imports, e.g. with webpackCopy
Your directories should look similar to this:Copy
stylesheets/blocks/ stylesheets/ext/ stylesheets/_environment.scss stylesheets/_variables.scss stylesheets/custom_bootstrap.scss ...
custom_bootstrap.scssshould start with a copy of
node_modules/bootstrap/scss/bootstrap.scss. You can comment out all modules that you don't use in your project, so you do not load the whole package.
Now you can start your
webpack-dev-serverto see if the packs can be built. You will see a lot of errors like this:Copy
ERROR in <SOME_FILE> Module build failed: background-color: $gray; Undefined variable: "$gray". in <YOUR_APPLICATION_PATH>/app/webpack/stylesheets/<some_file>.scss (line XX, column YY) : Failed to compile.
You could collect the missing variables in a block at the end of
_variables.scssand set them to their old value. In a later step you can eliminate them bit by bit and use their new versions.
If you have used
bootstrap-sassbefore you may have already overwritten some variables. Move them also to this block at the end of the file, e.g.Copy
// BS3 variables (Not in bootstrap 4 anymore) $gray-base: #000; $gray-darker: #222; $gray-dark: #333; $gray: #555; $gray-light: #777; $gray-lighter: #eee;
Do this until your packs can be built again.
Tip: You should take a look at the sass variables at
"~bootstrap/scss/variables". You can tweak a lot with these variables and you can reactivate some BS3 behaviour by overwriting them with the old defaults.
Now you can take your first look at your application. Many of it will be broken. So be prepared. You have to check each page on your own. There is no way around that!