Pingendo Help Center

Migrating from Alpha to Bootstrap-4.0.0-beta


#1

Bootstrap 4.0 Beta is finally available! If you are using the Alpha version you have to upgrade your pages to get everything working fine.

Here’s a short list of what you should do :

  • Open a page using Boostrap 4 Alpha

  • You shoud get a warning about the obsolete Bootstrap version.

  • Open the SASS source editor, scroll to the bottom and replace
    @import 'bootstrap-4.0.0-alpha.X' to @import 'bootstrap-4.0.0-beta.1'


Now your theme is using the latest version of Bootstrap. The warning should have disappeared and you are up to date. Well done!

At this point there might be some glitches in your page. This because Bootstrap 4 beta introduces some breaking changes in class names for HTML.

First is the new way of defining the theme color palette via SASS. You should manually change SASS from this:

$brand-primary:             #00b0eb;
$brand-success:             #5cb85c;
$brand-info:                #333;
$brand-warning:             #f0ad4e;
$brand-danger:              #d9534f;
$brand-inverse:             #292b2c;

To this:

$theme-colors: (
  primary: #007bff,
  secondary: #868e96,
  success: #28a745,
  info: #17a2b8,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);

Notice that inverse and faded were removed and replaced with dark and light. Moreover, a secondary color has been introduced.

Here the Bootstrap 4 beta 1 ship list where you can find more of these changes.
You can manually fix the HTML discrepancies or recreating the not-working components to get the right markup for the latest version.

Don’t forget to include the new JS too:

<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>`
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

We are aware of the extra effort that this migration implies. Though, Bootstrap team claimed that they will be doing their best to keep all the classes, features, and docs URLs in the future as they appear now.

Thanks for the comprehension and good work!


unlisted #2

listed #3

pinned globally #4