Migrating from Beta to Bootstrap v4.0 stable


#1

Bootstrap has eventually released its 4.0 stable version, and Pingendo is already supporting it. There are few and simple changes to migrate your projects from the beta version to the last updated one. You’ll find here the instructions for the migration. Briefly the main tasks are:

  • change import in the SASS editor to @import 'bootstrap-4.0.0';
  • update the scripts at the bottom of the HTML with the new ones link
  • if you have forms, tables and input-group-btn there are some HTML changes list

Step by step guide

Here below there are more details for performing the list above.

Change import

Open a web page of the project you want to update and open the SASS editor

Scroll down to find the old beta import

Replace it with the new one (or just delete -beta.1)

@import 'bootstrap-4.0.0';

The alert at the top should disappear and Pingendo is already importing the newest Bootstrap

Scripts updates

At the very bottom or the HTML editor, just before the </body> tag there are three scripts essential for Bootstrap.

Replace the three of them with the updated versions, available also on the official Bootstrap page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Delete “color yiq”

Some Pingendo templates used to include the following snippet just below the @import 'bootstrap-4.0.0'; and it might give you problem whit this update

// fix yiq for backgrounds
@each $name, $value in $theme-colors {
  .bg-#{$name} {
    @include color-yiq($value);
  }
}

You can safely remove it as it has been implemented in the app.

Forms, tables and inputs

There are very few changes to HTML snippets, and these deal with the three typology written above. So if you have included any form, or table or the input groups you should read the official Bootstrap page for migration (find it here).

Anyway, you will find some updated snippets in the component browser in app and more are about to come.

Conclusion

With this release Bootstrap has put an heavy milestone in its path, and things are not likely to get breaking changes soon. This is why I would recommend you to update your project to the stable v4.0 version and forget about updates for a while.

Do not hesitate to post any question here below. Answers might help other users.

Thanks and enjoy!