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:
- 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
- All Bootstrap javascript has been updated.
- A number of SASS variables are no longer available in Bootstrap 4 Stable.
- m-t-* and other spacing utilities should be replaced with mt-*.
The units that were used for margins have changed too m-t-1 is now mt-3 m-t-2 is now mt-4 m-t-3 is now mt-5
- New breakpoints for grids have been added:
.col-* <576px .col-sm-* >= 576px .col-md-* >= 768px .col-lg-* >= 992px .col-xl-* >= 1200px
- All usage of '*-xs-*' have been dropped. So 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.
