Posted 22 days ago. Visible to the public. Linked content. Auto-destruct in 38 days

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:

Select2

  • 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 jQuery.

simple-navigation

  • 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.

Suggestion: Remove simple-navigation and simple_navigation_renderers and 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

will_paginate-bootstrap

  • 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 to

Copy
will_paginate(collection, renderer: WillPaginate::ActionView::BootstrapLinkRenderer, ...)

bootstrap-datepicker

  • still maintained but has no explicit stylesheet for Bootstrap 4
  • the bootstrap-datepicker3.css stylesheet 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.

bootstrap-clockpicker

  • no longer maintained
  • has no explicit stylesheet for Bootstrap 4
  • the bootstrap-clockpicker.css stylesheet 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:

Phase 1

First you should include the new version into your project and replace the old imports, e.g. with webpack

Copy
import 'bootstrap-sass/assets/javascripts/bootstrap.js'

to

Copy
import 'bootstrap/dist/js/bootstrap.bundle.js'

Your directories should look similar to this:

Copy
stylesheets/blocks/ stylesheets/ext/ stylesheets/_environment.scss stylesheets/_variables.scss stylesheets/custom_bootstrap.scss ...

where custom_bootstrap.scss should 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-server to 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.scss and 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-sass before 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!

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Florian Leinsinger
Last edit:
22 days ago
by Florian Leinsinger
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Florian Leinsinger to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more