Updating a boost based theme
The Boost theme for Moodle 3.5 has been upgraded to use the upstream [Bootstrap 4|https://getbootstrap.com/docs/4.0/getting-started/introduction/] libraries. This affects Boost child themes in a number of ways:
Changes in presets
The structure of [Boost presets|https://docs.moodle.org/dev/Boost_Presets] have changed, In versions up to Moodle 3.4 all Sass files were included using one single line for importing:
// Import Core moodle CSS.
@import "moodle";
The import has now been split into 3 separate files:
// Import FontAwesome.
@import "fontawesome";
// Import All of Bootstrap.
@import "bootstrap";
// Import Core moodle CSS.
@import "moodle";
Changes in Bootstrap
Bootstrap 4 Stable includes major changes compared to the Bootstrap 4 Alpha library used in Boost for Moodle 3.4 and older releases. Changes that affect Moodle most are:
Flex
- Switch to using [flex|https://getbootstrap.com/docs/4.0/utilities/flex/] positioning. This is used a lot in grids and form elements.
Changes in variable names
JavaScript
The Boost javascript has been updated to use the 4.0 Bootstrap JavaScript, this includes using the [Popper|https://popper.js.org] library for positioning Modals and Tooltips.
Sass variables
A number of SASS variables are no longer available in Bootstrap 4 Stable. Some of these variables were widely used in Core SASS and potentially in child themes. Some examples of these are:
$font-size-root $brand-primary $spacer $gray-dark $state-success-text
The variables and some utility classes used in Core SASS and HTML can still be used because of the Bootstrap 4 compatibility SASS file in theme/boost/scss/moodle/bs4alphacompat.scss.
Bootstrap utility classes
m-t-* and other spacing utilities should be replaced with mt-*.
m-t-1 is now mt-3 m-t-2 is now mt-4 m-t-3 is now mt-5
A more detailed description of using spacing classes can be found on the [Bootstrap spacing utilities|https://getbootstrap.com/docs/4.0/utilities/spacing/] page
The hidden-md-up and related classes have been removed from upstream Bootstrap, rather than using explicit hidden-* classes, you hide an element by simply hiding it at that screen size using d-sm-none. More info on the [Bootstrap utilities|https://getbootstrap.com/docs/4.0/migration/#utilities] page
New grid breakpoints
The Boost grid breakpoints are
.col-* <576px .col-sm-* >= 576px .col-md-* >= 768px .col-lg-* >= 992px .col-xl-* >= 1200px
All usage of '*-xs-*' have been dropped. What used to be col-xs-6 should now be written as col-6.
- -md-* has become *-lg-*, and *-lg-* has become *-xl-*.
Typography
Boostrap 4 uses a native font stack that selects the best font-family for each OS and device. For font sizing the browser default root font-size (typically 16px) is used. this variable can be changed using the variable '$font-size-base'. In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.
