From 4394f9e3583bf1bd1c2553a664b5b3fd37ee200e Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Mon, 27 Jan 2020 15:06:29 +0100
Subject: [PATCH] MDL-67735 theme_boost: remove bs2 and bs4alpha compatibility
 css

---
 .../analytics/classes/output/models_list.php  |   2 +-
 .../templates/evaluation_options.mustache     |   4 +-
 .../templates/export_options.mustache         |   2 +-
 .../customlang/templates/translator.mustache  |  10 +-
 .../templates/component_status.mustache       |  12 +-
 .../templates/data_registry.mustache          |   2 +-
 .../data_registry_compliance.mustache         |   2 +-
 .../templates/defaults_display.mustache       |   6 +-
 .../dataprivacy/templates/summary.mustache    |   4 +-
 .../langimport/templates/langimport.mustache  |   2 +-
 .../manage_competencies_page.mustache         |   2 +-
 .../moodlenet/amd/build/instance_form.min.js  |   2 +-
 .../amd/build/instance_form.min.js.map        |   2 +-
 admin/tool/moodlenet/amd/src/instance_form.js |   4 +-
 .../templates/import_confirmation.mustache    |   2 +-
 .../templates/import_options_select.mustache  |   2 +-
 .../insight_info_message_prediction.mustache  |   2 +-
 ...odle-availability_completion-form-debug.js |   2 +-
 ...moodle-availability_completion-form-min.js |   2 +-
 .../moodle-availability_completion-form.js    |   2 +-
 .../completion/yui/src/form/js/form.js        |   2 +-
 .../moodle-availability_date-form-debug.js    |   2 +-
 .../moodle-availability_date-form-min.js      |   2 +-
 .../moodle-availability_date-form.js          |   2 +-
 .../condition/date/yui/src/form/js/form.js    |   2 +-
 .../moodle-availability_grade-form-debug.js   |   2 +-
 .../moodle-availability_grade-form-min.js     |   2 +-
 .../moodle-availability_grade-form.js         |   2 +-
 .../condition/grade/yui/src/form/js/form.js   |   2 +-
 .../moodle-availability_group-form-debug.js   |   2 +-
 .../moodle-availability_group-form-min.js     |   2 +-
 .../moodle-availability_group-form.js         |   2 +-
 .../condition/group/yui/src/form/js/form.js   |   2 +-
 ...moodle-availability_grouping-form-debug.js |   2 +-
 .../moodle-availability_grouping-form-min.js  |   2 +-
 .../moodle-availability_grouping-form.js      |   2 +-
 .../grouping/yui/src/form/js/form.js          |   2 +-
 .../moodle-availability_profile-form-debug.js |   2 +-
 .../moodle-availability_profile-form-min.js   |   2 +-
 .../moodle-availability_profile-form.js       |   2 +-
 .../condition/profile/yui/src/form/js/form.js |   2 +-
 .../moodle-core_availability-form-debug.js    |   4 +-
 .../moodle-core_availability-form-min.js      |   4 +-
 .../moodle-core_availability-form.js          |   4 +-
 availability/yui/src/form/js/form.js          |   4 +-
 badges/renderer.php                           |   4 +-
 .../myoverview/templates/view-list.mustache   |   4 +-
 .../templates/view-summary.mustache           |   4 +-
 blocks/rss_client/templates/item.mustache     |   2 +-
 calendar/templates/event_item.mustache        |   2 +-
 course/templates/activityinstance.mustache    |   6 +-
 .../templates/bulkactivitycompletion.mustache |   2 +-
 course/templates/coursecard.mustache          |   2 +-
 .../defaultactivitycompletion.mustache        |   8 +-
 grade/edit/outcome/course_form.html           |   6 +-
 group/templates/index.mustache                |   2 +-
 lib/badgeslib.php                             |   2 +-
 lib/editor/atto/plugins/image/styles.css      |   6 +-
 .../moodle-atto_table-button-debug.js         |  22 +-
 .../moodle-atto_table-button-min.js           |   2 +-
 .../moodle-atto_table-button.js               |  22 +-
 .../plugins/table/yui/src/button/js/button.js |  22 +-
 lib/form/filemanager.js                       |   2 +-
 lib/outputrenderers.php                       |   4 +-
 .../auth_digital_minor_page.mustache          |   2 +-
 lib/templates/filemanager_uploadform.mustache |   2 +-
 lib/tests/weblib_test.php                     |   2 +-
 message/templates/message_index.mustache      |   4 +-
 .../message_preferences_component.mustache    |   2 +-
 ...references_notification_processor.mustache |   2 +-
 ...otification_preferences_component.mustache |   2 +-
 ...references_component_notification.mustache |   2 +-
 .../tool/print/classes/output/renderer.php    |   8 +-
 .../tool/print/templates/print_book.mustache  |  22 +-
 .../templates/print_book_chapter.mustache     |   2 +-
 mod/forum/report/summary/index.php            |   2 +-
 .../summary/templates/filter_groups.mustache  |   2 +-
 mod/forum/templates/discussion_list.mustache  |  10 +-
 mod/forum/templates/forum_discussion.mustache |   2 +-
 .../local/grades/view_grade.mustache          |  10 +-
 mod/forum/tests/mail_test.php                 |   4 +-
 .../formats/entrylist/entrylist_format.php    |   2 +-
 mod/glossary/lib.php                          |   2 +-
 mod/lesson/locallib.php                       |   4 +-
 mod/lesson/renderer.php                       |   7 +-
 .../modal_add_random_question.mustache        |   6 +-
 .../behat/manually_mark_question.feature      |   2 +-
 question/type/ddimageortext/rendererbase.php  |   2 +-
 question/type/ddimageortext/styles.css        |   4 -
 question/type/ddmarker/renderer.php           |   2 +-
 question/type/ddmarker/styles.css             |   4 -
 report/competency/templates/report.mustache   |   2 +-
 report/participation/index.php                |   2 +-
 theme/boost/scss/moodle.scss                  |   4 +-
 theme/boost/scss/moodle/admin.scss            |  12 +-
 theme/boost/scss/moodle/backup-restore.scss   |  12 +-
 theme/boost/scss/moodle/bs2-compat.scss       |  59 --
 theme/boost/scss/moodle/bs4alphacompat.scss   | 236 ------
 theme/boost/scss/moodle/calendar.scss         |   2 +-
 theme/boost/scss/moodle/core.scss             |  25 +-
 theme/boost/scss/moodle/course.scss           |  16 +-
 theme/boost/scss/moodle/forms.scss            |  10 +-
 theme/boost/scss/moodle/grade.scss            |   6 +-
 theme/boost/scss/moodle/modules.scss          |  20 +-
 theme/boost/scss/moodle/question.scss         |  10 +-
 theme/boost/scss/moodle/tool_usertours.scss   |   6 +-
 theme/boost/scss/moodle/variables.scss        |  20 +
 theme/boost/scss/preset/default.scss          |  11 +
 theme/boost/style/moodle.css                  | 752 ++++++++---------
 theme/classic/scss/preset/default.scss        |  11 +
 theme/classic/style/moodle.css                | 754 ++++++++----------
 theme/index.php                               |   4 +-
 theme/upgrade.txt                             |  22 +
 113 files changed, 958 insertions(+), 1403 deletions(-)
 delete mode 100644 theme/boost/scss/moodle/bs2-compat.scss
 delete mode 100644 theme/boost/scss/moodle/bs4alphacompat.scss
 create mode 100644 theme/boost/scss/moodle/variables.scss

diff --git a/admin/tool/analytics/classes/output/models_list.php b/admin/tool/analytics/classes/output/models_list.php
index ade6739b2cf..be1cb664949 100644
--- a/admin/tool/analytics/classes/output/models_list.php
+++ b/admin/tool/analytics/classes/output/models_list.php
@@ -64,7 +64,7 @@ class models_list implements \renderable, \templatable {
         $data = new \stdClass();
 
         $newmodelmenu = new \action_menu();
-        $newmodelmenu->set_menu_trigger(get_string('newmodel', 'tool_analytics'), 'btn btn-default');
+        $newmodelmenu->set_menu_trigger(get_string('newmodel', 'tool_analytics'), 'btn btn-secondary');
         $newmodelmenu->set_alignment(\action_menu::TL, \action_menu::BL);
 
         $newmodelmenu->add(new \action_menu_link(
diff --git a/admin/tool/analytics/templates/evaluation_options.mustache b/admin/tool/analytics/templates/evaluation_options.mustache
index 9d77c134ae9..7f4ce8e74b4 100644
--- a/admin/tool/analytics/templates/evaluation_options.mustache
+++ b/admin/tool/analytics/templates/evaluation_options.mustache
@@ -57,10 +57,10 @@
 {{/trainedexternally}}
 
 {{! Hidden by default if #trainedexternally as the default option is trainedmodel in this case.}}
-<div id="id-evaluation-timesplitting-container" class="m-t-1 {{#trainedexternally}}hidden{{/trainedexternally}}">
+<div id="id-evaluation-timesplitting-container" class="mt-3 {{#trainedexternally}}hidden{{/trainedexternally}}">
     {{#str}} selecttimesplittingforevaluation, tool_analytics {{/str}}
     <div>
-        <select id="id-evaluation-timesplitting" name="timesplitting" class="custom-select m-t-1">
+        <select id="id-evaluation-timesplitting" name="timesplitting" class="custom-select mt-3">
             {{#timesplittingmethods}}
                 <option value="{{id}}">{{text}}</option>
             {{/timesplittingmethods}}
diff --git a/admin/tool/analytics/templates/export_options.mustache b/admin/tool/analytics/templates/export_options.mustache
index 34ebe943afa..c05550d7961 100644
--- a/admin/tool/analytics/templates/export_options.mustache
+++ b/admin/tool/analytics/templates/export_options.mustache
@@ -39,7 +39,7 @@
     <input class="custom-control-input" type="radio" name="exportoption" id="id-mode-exportmodel" value="exportmodel" checked>
     <label class="custom-control-label" for="id-mode-exportmodel">{{#str}} exportmodel, tool_analytics {{/str}}</label>
 </div>
-<div class="custom-control custom-checkbox m-l-2" id="id-includeweights-container">
+<div class="custom-control custom-checkbox ml-5" id="id-includeweights-container">
   <input class="custom-control-input" type="checkbox" id="id-includeweights" value="1" checked>
   <label class="custom-control-label" for="id-includeweights">{{#str}} exportincludeweights, tool_analytics {{/str}}</label>
 </div>
diff --git a/admin/tool/customlang/templates/translator.mustache b/admin/tool/customlang/templates/translator.mustache
index 62cbdac7c31..400464cb0de 100644
--- a/admin/tool/customlang/templates/translator.mustache
+++ b/admin/tool/customlang/templates/translator.mustache
@@ -59,7 +59,7 @@
     <input type="hidden" name="sesskey" value="{{{ sesskey }}}">
     <input type="hidden" name="p" value="{{ currentpage }}">
 
-    <fieldset class="m-a-1 m-3">
+    <fieldset class="m-3">
         <button type="submit" name="savecontinue" class="btn btn-secondary">
             {{#str}}savecontinue, tool_customlang{{/str}}
         </button>
@@ -70,7 +70,7 @@
 
     <div class="list-group">
         <div class="container-fluid d-none d-md-block list-group-item border-bottom-0">
-            <div class="row-fluid">
+            <div class="row">
                 <div class="col-sm-4 col-md-2">
                     <strong>{{#str}}headingcomponent, tool_customlang{{/str}}</strong>
                 </div>
@@ -81,7 +81,7 @@
                     <strong>{{#str}}headingstandard, tool_customlang{{/str}}</strong>
                 </div>
                 <div class="col-sm-12 col-md-6">
-                    <span class="p-l-1 pl-3">
+                    <span class="pl-3">
                         <strong>{{#str}}headinglocal, tool_customlang{{/str}}</strong>
                     </span>
                 </div>
@@ -96,7 +96,7 @@
                 {{#outdated}}list-group-item-warning{{/outdated}}
                 {{#modified}}list-group-item-info{{/modified}}"
             >
-            <div class="row-fluid ">
+            <div class="row">
                 <div class="col-sm-4 col-md-2">
                     <div class="d-md-none">
                         <strong>{{#str}}headingcomponent, tool_customlang{{/str}}</strong>
@@ -147,7 +147,7 @@
     {{/strings}}
     </div>
 
-    <fieldset class="m-a-1 m-3">
+    <fieldset class="m-3">
         <button type="submit" name="savecontinue" class="btn btn-secondary">
             {{#str}}savecontinue, tool_customlang{{/str}}
         </button>
diff --git a/admin/tool/dataprivacy/templates/component_status.mustache b/admin/tool/dataprivacy/templates/component_status.mustache
index 8d2bf1bf26c..7130dbffa90 100644
--- a/admin/tool/dataprivacy/templates/component_status.mustache
+++ b/admin/tool/dataprivacy/templates/component_status.mustache
@@ -50,12 +50,12 @@
     <hr />
     <div class="row">
         {{#compliant}}
-            <a class="component-expand p-l-2" data-component="{{raw_component}}" href='#'>
-            <h4 class=" d-inline p-l-2 " id="{{raw_component}}">{{#pix}}t/collapsed, moodle, {{#str}}expandplugin, tool_dataprivacy{{/str}}{{/pix}}{{component}}</h4>
+            <a class="component-expand pl-5" data-component="{{raw_component}}" href='#'>
+            <h4 class=" d-inline pl-5 " id="{{raw_component}}">{{#pix}}t/collapsed, moodle, {{#str}}expandplugin, tool_dataprivacy{{/str}}{{/pix}}{{component}}</h4>
             </a>
         {{/compliant}}
         {{^compliant}}
-            <h4 class="d-inline p-l-3 " id="{{raw_component}}">{{component}}</h4>
+            <h4 class="d-inline pl-6 " id="{{raw_component}}">{{component}}</h4>
             <span>{{#pix}}i/risk_xss, moodle, {{#str}}requiresattention, tool_dataprivacy{{/str}}{{/pix}}</span>
         {{/compliant}}
         {{#external}}
@@ -73,7 +73,7 @@
         <div class="hide" data-section="{{raw_component}}" aria-expanded="false" role="contentinfo">
             {{#metadata}}
                 <hr />
-                <div class="p-l-3">
+                <div class="pl-6">
                     <dl class="row">
                         <dt class="col-3">
                             {{#link}}
@@ -98,7 +98,7 @@
             {{/metadata}}
             {{#nullprovider}}
                 <hr />
-                <div class="p-l-3">
+                <div class="pl-6">
                     <div class="row">
                         <div class="col-12">
                             {{nullprovider}}
@@ -108,4 +108,4 @@
             {{/nullprovider}}
         </div>
     {{/compliant}}
-</div>
\ No newline at end of file
+</div>
diff --git a/admin/tool/dataprivacy/templates/data_registry.mustache b/admin/tool/dataprivacy/templates/data_registry.mustache
index d77c7cf80a2..501c5df9c21 100644
--- a/admin/tool/dataprivacy/templates/data_registry.mustache
+++ b/admin/tool/dataprivacy/templates/data_registry.mustache
@@ -54,7 +54,7 @@
 
     <div class="container-fluid mt-2">
         <div class="row">
-            <div class="col-md-4 p-l-0 nav-pills context-tree">
+            <div class="col-md-4 pl-0 nav-pills context-tree">
                 {{#tree}}
                     {{> tool_dataprivacy/context_tree_node}}
                 {{/tree}}
diff --git a/admin/tool/dataprivacy/templates/data_registry_compliance.mustache b/admin/tool/dataprivacy/templates/data_registry_compliance.mustache
index c2231f3fa99..ec41fc23c41 100644
--- a/admin/tool/dataprivacy/templates/data_registry_compliance.mustache
+++ b/admin/tool/dataprivacy/templates/data_registry_compliance.mustache
@@ -59,7 +59,7 @@
             <h3 id="{{plugin_type_raw}}">{{#pix}}t/collapsed, moodle, {{#str}}expandplugintype, tool_dataprivacy{{/str}}{{/pix}}{{plugin_type}}</h3>
             </a>
         </div>
-        <div class="hide p-b-1" data-plugintarget="{{plugin_type_raw}}" aria-expanded="false" role="contentinfo">
+        <div class="hide pb-3" data-plugintarget="{{plugin_type_raw}}" aria-expanded="false" role="contentinfo">
             {{#plugins}}
                 {{> tool_dataprivacy/component_status}}
             {{/plugins}}
diff --git a/admin/tool/dataprivacy/templates/defaults_display.mustache b/admin/tool/dataprivacy/templates/defaults_display.mustache
index dc1eb721348..0053a3152fe 100644
--- a/admin/tool/dataprivacy/templates/defaults_display.mustache
+++ b/admin/tool/dataprivacy/templates/defaults_display.mustache
@@ -41,9 +41,9 @@
         "contextlevel": 70
     }
 }}
-<div class="row-fluid rtl-compatible mt-1 mb-1">
+<div class="row rtl-compatible mt-1 mb-1">
     <div class="col-md-9">
-        <div class="row-fluid rtl-compatible mt-1 mb-1">
+        <div class="row rtl-compatible mt-1 mb-1">
             <div class="col-md-3">
                 <strong>{{#str}}category, tool_dataprivacy{{/str}}</strong>
             </div>
@@ -51,7 +51,7 @@
                 {{category}}
             </div>
         </div>
-        <div class="row-fluid rtl-compatible mt-1 mb-1">
+        <div class="row rtl-compatible mt-1 mb-1">
             <div class="col-md-3">
                 <strong>{{#str}}purpose, tool_dataprivacy{{/str}}</strong>
             </div>
diff --git a/admin/tool/dataprivacy/templates/summary.mustache b/admin/tool/dataprivacy/templates/summary.mustache
index 22c02212041..a6be02e26a7 100644
--- a/admin/tool/dataprivacy/templates/summary.mustache
+++ b/admin/tool/dataprivacy/templates/summary.mustache
@@ -74,7 +74,7 @@
     {{#contexts}}
         <div class="card mb-3">
             <div class="card-header"><h3>{{contextname}}</h3></div>
-            <div class="card-body p-l-2 p-r-2">
+            <div class="card-body pl-5 pr-5">
 
                 {{#category.name}}
                 <h4>{{#str}}category, tool_dataprivacy{{/str}}</h4>
@@ -120,4 +120,4 @@
             </div>
         </div>
     {{/contexts}}
-</div>
\ No newline at end of file
+</div>
diff --git a/admin/tool/langimport/templates/langimport.mustache b/admin/tool/langimport/templates/langimport.mustache
index 4b6b645f5a8..71a7515084b 100644
--- a/admin/tool/langimport/templates/langimport.mustache
+++ b/admin/tool/langimport/templates/langimport.mustache
@@ -65,7 +65,7 @@
     }
 }}
 <div class="container-fluid langimport">
-    <div class="row row-fluid rtl-compatible">
+    <div class="row rtl-compatible">
         <div class="col-md-{{#caninstall}}6{{/caninstall}}{{^caninstall}}12{{/caninstall}} span{{#caninstall}}6{{/caninstall}}{{^caninstall}}12{{/caninstall}} mb-1">
             <form id="uninstallform" action="{{uninstallurl}}" method="post">
                 <fieldset>
diff --git a/admin/tool/lp/templates/manage_competencies_page.mustache b/admin/tool/lp/templates/manage_competencies_page.mustache
index ccc67ba15af..1c2cd1117ca 100644
--- a/admin/tool/lp/templates/manage_competencies_page.mustache
+++ b/admin/tool/lp/templates/manage_competencies_page.mustache
@@ -46,7 +46,7 @@
 </h2>
 <div>{{{framework.description}}}</div>
     <h3>{{#str}}competencies, core_competency{{/str}}</h3>
-    <div class="row-fluid row">
+    <div class="row">
         <div class="col-lg-6">
             <p>
                 <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="form-inline">
diff --git a/admin/tool/moodlenet/amd/build/instance_form.min.js b/admin/tool/moodlenet/amd/build/instance_form.min.js
index a6f0561f12d..70d692bc592 100644
--- a/admin/tool/moodlenet/amd/build/instance_form.min.js
+++ b/admin/tool/moodlenet/amd/build/instance_form.min.js
@@ -1,2 +1,2 @@
-define ("tool_moodlenet/instance_form",["tool_moodlenet/validator","tool_moodlenet/selectors","core/loadingicon","core/templates","core/notification","jquery"],function(a,b,c,d,e,f){var g=function(d){d.addEventListener("click",function(f){if(f.target.matches(b.action.submit)){var e=d.querySelector("[data-var=\"mnet-link\"]"),g=d.querySelector(b.region.spinner),h=document.querySelector(b.region.validationArea);g.classList.remove("d-none");var i=c.addIconToContainerWithPromise(g);a.validation(e).then(function(a){i.resolve();g.classList.add("d-none");if(a.result){e.classList.remove("is-invalid");e.classList.add("is-valid");h.innerText=a.message;h.classList.remove("text-error");h.classList.add("text-success");setTimeout(function(){window.location=a.domain},1e3)}else{e.classList.add("is-invalid");h.innerText=a.message;h.classList.add("text-error")}}).catch()}})},h=function(a,b,h,i){a.innerHTML="";var j=c.addIconToContainer(a),k=null,l=new Promise(function(a){k=a});f.when(j,l).then(function(){d.replaceNodeContents(a,b.customcarouseltemplate,"")}).catch(e.exception);g(a);h.one("slid.bs.carousel",function(){k()});h.carousel(2);i.setFooter(d.render("tool_moodlenet/chooser_footer_close_mnet",{}))},i=function(a,b,c){a.carousel(0);b.setFooter(c.customfootertemplate)};return{footerClickListener:function footerClickListener(a,c,d){if(a.target.matches(b.action.showMoodleNet)||a.target.closest(b.action.showMoodleNet)){a.preventDefault();var e=f(d.getBody()[0].querySelector(b.region.carousel)),g=e.find(b.region.moodleNet)[0];h(g,c,e,d)}if(a.target.matches(b.action.closeOption)){var j=f(d.getBody()[0].querySelector(b.region.carousel));i(j,d,c)}}}});
+define ("tool_moodlenet/instance_form",["tool_moodlenet/validator","tool_moodlenet/selectors","core/loadingicon","core/templates","core/notification","jquery"],function(a,b,c,d,e,f){var g=function(d){d.addEventListener("click",function(f){if(f.target.matches(b.action.submit)){var e=d.querySelector("[data-var=\"mnet-link\"]"),g=d.querySelector(b.region.spinner),h=document.querySelector(b.region.validationArea);g.classList.remove("d-none");var i=c.addIconToContainerWithPromise(g);a.validation(e).then(function(a){i.resolve();g.classList.add("d-none");if(a.result){e.classList.remove("is-invalid");e.classList.add("is-valid");h.innerText=a.message;h.classList.remove("text-danger");h.classList.add("text-success");setTimeout(function(){window.location=a.domain},1e3)}else{e.classList.add("is-invalid");h.innerText=a.message;h.classList.add("text-danger")}}).catch()}})},h=function(a,b,h,i){a.innerHTML="";var j=c.addIconToContainer(a),k=null,l=new Promise(function(a){k=a});f.when(j,l).then(function(){d.replaceNodeContents(a,b.customcarouseltemplate,"")}).catch(e.exception);g(a);h.one("slid.bs.carousel",function(){k()});h.carousel(2);i.setFooter(d.render("tool_moodlenet/chooser_footer_close_mnet",{}))},i=function(a,b,c){a.carousel(0);b.setFooter(c.customfootertemplate)};return{footerClickListener:function footerClickListener(a,c,d){if(a.target.matches(b.action.showMoodleNet)||a.target.closest(b.action.showMoodleNet)){a.preventDefault();var e=f(d.getBody()[0].querySelector(b.region.carousel)),g=e.find(b.region.moodleNet)[0];h(g,c,e,d)}if(a.target.matches(b.action.closeOption)){var j=f(d.getBody()[0].querySelector(b.region.carousel));i(j,d,c)}}}});
 //# sourceMappingURL=instance_form.min.js.map
diff --git a/admin/tool/moodlenet/amd/build/instance_form.min.js.map b/admin/tool/moodlenet/amd/build/instance_form.min.js.map
index 3e2853cc56c..61f257ee405 100644
--- a/admin/tool/moodlenet/amd/build/instance_form.min.js.map
+++ b/admin/tool/moodlenet/amd/build/instance_form.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/instance_form.js"],"names":["define","Validator","Selectors","LoadingIcon","Templates","Notification","$","registerListenerEvents","page","addEventListener","e","target","matches","action","submit","input","querySelector","overlay","region","spinner","validationArea","document","classList","remove","addIconToContainerWithPromise","validation","then","result","resolve","add","innerText","message","setTimeout","window","location","domain","catch","chooserNavigateToMnet","showMoodleNet","footerData","carousel","modal","innerHTML","spinnerPromise","addIconToContainer","transitionPromiseResolver","transitionPromise","Promise","when","replaceNodeContents","customcarouseltemplate","exception","one","setFooter","render","chooserNavigateFromMnet","customfootertemplate","footerClickListener","closest","preventDefault","getBody","find","moodleNet","closeOption"],"mappings":"AA+BAA,OAAM,gCAAC,CAAC,0BAAD,CACC,0BADD,CAEC,kBAFD,CAGC,gBAHD,CAIC,mBAJD,CAKC,QALD,CAAD,CAMF,SAASC,CAAT,CACSC,CADT,CAESC,CAFT,CAGSC,CAHT,CAISC,CAJT,CAKSC,CALT,CAKY,IAQRC,CAAAA,CAAsB,CAAG,SAAgCC,CAAhC,CAAsC,CAC/DA,CAAI,CAACC,gBAAL,CAAsB,OAAtB,CAA+B,SAASC,CAAT,CAAY,CAGvC,GAAIA,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiBC,MAAlC,CAAJ,CAA+C,IACvCC,CAAAA,CAAK,CAAGP,CAAI,CAACQ,aAAL,CAAmB,0BAAnB,CAD+B,CAEvCC,CAAO,CAAGT,CAAI,CAACQ,aAAL,CAAmBd,CAAS,CAACgB,MAAV,CAAiBC,OAApC,CAF6B,CAGvCC,CAAc,CAAGC,QAAQ,CAACL,aAAT,CAAuBd,CAAS,CAACgB,MAAV,CAAiBE,cAAxC,CAHsB,CAK3CH,CAAO,CAACK,SAAR,CAAkBC,MAAlB,CAAyB,QAAzB,EACA,GAAIJ,CAAAA,CAAO,CAAGhB,CAAW,CAACqB,6BAAZ,CAA0CP,CAA1C,CAAd,CACAhB,CAAS,CAACwB,UAAV,CAAqBV,CAArB,EACKW,IADL,CACU,SAASC,CAAT,CAAiB,CACnBR,CAAO,CAACS,OAAR,GACAX,CAAO,CAACK,SAAR,CAAkBO,GAAlB,CAAsB,QAAtB,EACA,GAAIF,CAAM,CAACA,MAAX,CAAmB,CACfZ,CAAK,CAACO,SAAN,CAAgBC,MAAhB,CAAuB,YAAvB,EACAR,CAAK,CAACO,SAAN,CAAgBO,GAAhB,CAAoB,UAApB,EACAT,CAAc,CAACU,SAAf,CAA2BH,CAAM,CAACI,OAAlC,CACAX,CAAc,CAACE,SAAf,CAAyBC,MAAzB,CAAgC,YAAhC,EACAH,CAAc,CAACE,SAAf,CAAyBO,GAAzB,CAA6B,cAA7B,EAEAG,UAAU,CAAC,UAAW,CAClBC,MAAM,CAACC,QAAP,CAAkBP,CAAM,CAACQ,MAC5B,CAFS,CAEP,GAFO,CAGb,CAVD,IAUO,CACHpB,CAAK,CAACO,SAAN,CAAgBO,GAAhB,CAAoB,YAApB,EACAT,CAAc,CAACU,SAAf,CAA2BH,CAAM,CAACI,OAAlC,CACAX,CAAc,CAACE,SAAf,CAAyBO,GAAzB,CAA6B,YAA7B,CACH,CAER,CApBD,EAoBGO,KApBH,EAqBH,CACJ,CAhCD,CAiCH,CA1CW,CAqDRC,CAAqB,CAAG,SAASC,CAAT,CAAwBC,CAAxB,CAAoCC,CAApC,CAA8CC,CAA9C,CAAqD,CAC7EH,CAAa,CAACI,SAAd,CAA0B,EAA1B,CAD6E,GAIzEC,CAAAA,CAAc,CAAGxC,CAAW,CAACyC,kBAAZ,CAA+BN,CAA/B,CAJwD,CAOzEO,CAAyB,CAAG,IAP6C,CAQzEC,CAAiB,CAAG,GAAIC,CAAAA,OAAJ,CAAY,SAAAnB,CAAO,CAAI,CAC3CiB,CAAyB,CAAGjB,CAC/B,CAFuB,CARqD,CAY7EtB,CAAC,CAAC0C,IAAF,CACIL,CADJ,CAEIG,CAFJ,EAGEpB,IAHF,CAGO,UAAW,CACVtB,CAAS,CAAC6C,mBAAV,CAA8BX,CAA9B,CAA6CC,CAAU,CAACW,sBAAxD,CAAgF,EAAhF,CAEP,CAND,EAMGd,KANH,CAMS/B,CAAY,CAAC8C,SANtB,EASA5C,CAAsB,CAAC+B,CAAD,CAAtB,CAGAE,CAAQ,CAACY,GAAT,CAAa,kBAAb,CAAiC,UAAW,CACxCP,CAAyB,EAC5B,CAFD,EAIAL,CAAQ,CAACA,QAAT,CAAkB,CAAlB,EAEAC,CAAK,CAACY,SAAN,CAAgBjD,CAAS,CAACkD,MAAV,CAAiB,0CAAjB,CAA6D,EAA7D,CAAhB,CACH,CApFW,CA8FRC,CAAuB,CAAG,SAASf,CAAT,CAAmBC,CAAnB,CAA0BF,CAA1B,CAAsC,CAEhEC,CAAQ,CAACA,QAAT,CAAkB,CAAlB,EACAC,CAAK,CAACY,SAAN,CAAgBd,CAAU,CAACiB,oBAA3B,CACH,CAlGW,CA2HZ,MAAO,CACHC,mBAAmB,CAjBG,QAAtBA,CAAAA,mBAAsB,CAAS/C,CAAT,CAAY6B,CAAZ,CAAwBE,CAAxB,CAA+B,CACrD,GAAI/B,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiByB,aAAlC,GAAoD5B,CAAC,CAACC,MAAF,CAAS+C,OAAT,CAAiBxD,CAAS,CAACW,MAAV,CAAiByB,aAAlC,CAAxD,CAA0G,CACtG5B,CAAC,CAACiD,cAAF,GADsG,GAEhGnB,CAAAA,CAAQ,CAAGlC,CAAC,CAACmC,CAAK,CAACmB,OAAN,GAAgB,CAAhB,EAAmB5C,aAAnB,CAAiCd,CAAS,CAACgB,MAAV,CAAiBsB,QAAlD,CAAD,CAFoF,CAGhGF,CAAa,CAAGE,CAAQ,CAACqB,IAAT,CAAc3D,CAAS,CAACgB,MAAV,CAAiB4C,SAA/B,EAA0C,CAA1C,CAHgF,CAKtGzB,CAAqB,CAACC,CAAD,CAAgBC,CAAhB,CAA4BC,CAA5B,CAAsCC,CAAtC,CACxB,CAED,GAAI/B,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiBkD,WAAlC,CAAJ,CAAoD,CAChD,GAAMvB,CAAAA,CAAQ,CAAGlC,CAAC,CAACmC,CAAK,CAACmB,OAAN,GAAgB,CAAhB,EAAmB5C,aAAnB,CAAiCd,CAAS,CAACgB,MAAV,CAAiBsB,QAAlD,CAAD,CAAlB,CAEAe,CAAuB,CAACf,CAAD,CAAWC,CAAX,CAAkBF,CAAlB,CAC1B,CACJ,CAEM,CAGV,CAzIK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Our basic form manager for when a user either enters\n * their profile url or just wants to browse.\n *\n * This file is a mishmash of JS functions we need for both the standalone (M3.7, M3.8)\n * plugin & Moodle 3.9 functions. The 3.9 Functions have a base understanding that certain\n * things exist i.e. directory structures for templates. When this feature goes 3.9+ only\n * The goal is that we can quickly gut all AMD modules into bare JS files and use ES6 guidelines.\n * Till then this will have to do.\n *\n * @module     tool_moodlenet/instance_form\n * @package    tool_moodlenet\n * @copyright  2020 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(['tool_moodlenet/validator',\n        'tool_moodlenet/selectors',\n        'core/loadingicon',\n        'core/templates',\n        'core/notification',\n        'jquery'],\n    function(Validator,\n             Selectors,\n             LoadingIcon,\n             Templates,\n             Notification,\n             $) {\n\n    /**\n     * Add the event listeners to our form.\n     *\n     * @method registerListenerEvents\n     * @param {HTMLElement} page The whole page element for our form area\n     */\n    var registerListenerEvents = function registerListenerEvents(page) {\n        page.addEventListener('click', function(e) {\n\n            // Our fake submit button / browse button.\n            if (e.target.matches(Selectors.action.submit)) {\n                var input = page.querySelector('[data-var=\"mnet-link\"]');\n                var overlay = page.querySelector(Selectors.region.spinner);\n                var validationArea = document.querySelector(Selectors.region.validationArea);\n\n                overlay.classList.remove('d-none');\n                var spinner = LoadingIcon.addIconToContainerWithPromise(overlay);\n                Validator.validation(input)\n                    .then(function(result) {\n                        spinner.resolve();\n                        overlay.classList.add('d-none');\n                        if (result.result) {\n                            input.classList.remove('is-invalid'); // Just in case the class has been applied already.\n                            input.classList.add('is-valid');\n                            validationArea.innerText = result.message;\n                            validationArea.classList.remove('text-error');\n                            validationArea.classList.add('text-success');\n                            // Give the user some time to see their input is valid.\n                            setTimeout(function() {\n                                window.location = result.domain;\n                            }, 1000);\n                        } else {\n                            input.classList.add('is-invalid');\n                            validationArea.innerText = result.message;\n                            validationArea.classList.add('text-error');\n                        }\n                        return;\n                }).catch();\n            }\n        });\n    };\n\n    /**\n     * Given a user wishes to see the MoodleNet profile url form transition them there.\n     *\n     * @method chooserNavigateToMnet\n     * @param {HTMLElement} showMoodleNet The chooser's area for ment\n     * @param {Object} footerData Our footer object to render out\n     * @param {jQuery} carousel Our carousel instance to manage\n     * @param {jQuery} modal Our modal instance to manage\n     */\n    var chooserNavigateToMnet = function(showMoodleNet, footerData, carousel, modal) {\n        showMoodleNet.innerHTML = '';\n\n        // Add a spinner.\n        var spinnerPromise = LoadingIcon.addIconToContainer(showMoodleNet);\n\n        // Used later...\n        var transitionPromiseResolver = null;\n        var transitionPromise = new Promise(resolve => {\n            transitionPromiseResolver = resolve;\n        });\n\n        $.when(\n            spinnerPromise,\n            transitionPromise\n        ).then(function() {\n                Templates.replaceNodeContents(showMoodleNet, footerData.customcarouseltemplate, '');\n                return;\n        }).catch(Notification.exception);\n\n        // We apply our handlers in here to minimise plugin dependency in the Chooser.\n        registerListenerEvents(showMoodleNet);\n\n        // Move to the next slide, and resolve the transition promise when it's done.\n        carousel.one('slid.bs.carousel', function() {\n            transitionPromiseResolver();\n        });\n        // Trigger the transition between 'pages'.\n        carousel.carousel(2);\n        // eslint-disable-next-line max-len\n        modal.setFooter(Templates.render('tool_moodlenet/chooser_footer_close_mnet', {}));\n    };\n\n    /**\n     * Given a user no longer wishes to see the MoodleNet profile url form transition them from there.\n     *\n     * @method chooserNavigateFromMnet\n     * @param {jQuery} carousel Our carousel instance to manage\n     * @param {jQuery} modal Our modal instance to manage\n     * @param {Object} footerData Our footer object to render out\n     */\n    var chooserNavigateFromMnet = function(carousel, modal, footerData) {\n        // Trigger the transition between 'pages'.\n        carousel.carousel(0);\n        modal.setFooter(footerData.customfootertemplate);\n    };\n\n        /**\n         * Create the custom listener that would handle anything in the footer.\n         *\n         * @param {Event} e The event being triggered.\n         * @param {Object} footerData The data generated from the exporter.\n         * @param {Object} modal The chooser modal.\n         */\n    var footerClickListener = function(e, footerData, modal) {\n        if (e.target.matches(Selectors.action.showMoodleNet) || e.target.closest(Selectors.action.showMoodleNet)) {\n            e.preventDefault();\n            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));\n            const showMoodleNet = carousel.find(Selectors.region.moodleNet)[0];\n\n            chooserNavigateToMnet(showMoodleNet, footerData, carousel, modal);\n        }\n        // From the help screen go back to the module overview.\n        if (e.target.matches(Selectors.action.closeOption)) {\n            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));\n\n            chooserNavigateFromMnet(carousel, modal, footerData);\n        }\n    };\n\n    return {\n        footerClickListener: footerClickListener\n    };\n});\n"],"file":"instance_form.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/instance_form.js"],"names":["define","Validator","Selectors","LoadingIcon","Templates","Notification","$","registerListenerEvents","page","addEventListener","e","target","matches","action","submit","input","querySelector","overlay","region","spinner","validationArea","document","classList","remove","addIconToContainerWithPromise","validation","then","result","resolve","add","innerText","message","setTimeout","window","location","domain","catch","chooserNavigateToMnet","showMoodleNet","footerData","carousel","modal","innerHTML","spinnerPromise","addIconToContainer","transitionPromiseResolver","transitionPromise","Promise","when","replaceNodeContents","customcarouseltemplate","exception","one","setFooter","render","chooserNavigateFromMnet","customfootertemplate","footerClickListener","closest","preventDefault","getBody","find","moodleNet","closeOption"],"mappings":"AA+BAA,OAAM,gCAAC,CAAC,0BAAD,CACC,0BADD,CAEC,kBAFD,CAGC,gBAHD,CAIC,mBAJD,CAKC,QALD,CAAD,CAMF,SAASC,CAAT,CACSC,CADT,CAESC,CAFT,CAGSC,CAHT,CAISC,CAJT,CAKSC,CALT,CAKY,IAQRC,CAAAA,CAAsB,CAAG,SAAgCC,CAAhC,CAAsC,CAC/DA,CAAI,CAACC,gBAAL,CAAsB,OAAtB,CAA+B,SAASC,CAAT,CAAY,CAGvC,GAAIA,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiBC,MAAlC,CAAJ,CAA+C,IACvCC,CAAAA,CAAK,CAAGP,CAAI,CAACQ,aAAL,CAAmB,0BAAnB,CAD+B,CAEvCC,CAAO,CAAGT,CAAI,CAACQ,aAAL,CAAmBd,CAAS,CAACgB,MAAV,CAAiBC,OAApC,CAF6B,CAGvCC,CAAc,CAAGC,QAAQ,CAACL,aAAT,CAAuBd,CAAS,CAACgB,MAAV,CAAiBE,cAAxC,CAHsB,CAK3CH,CAAO,CAACK,SAAR,CAAkBC,MAAlB,CAAyB,QAAzB,EACA,GAAIJ,CAAAA,CAAO,CAAGhB,CAAW,CAACqB,6BAAZ,CAA0CP,CAA1C,CAAd,CACAhB,CAAS,CAACwB,UAAV,CAAqBV,CAArB,EACKW,IADL,CACU,SAASC,CAAT,CAAiB,CACnBR,CAAO,CAACS,OAAR,GACAX,CAAO,CAACK,SAAR,CAAkBO,GAAlB,CAAsB,QAAtB,EACA,GAAIF,CAAM,CAACA,MAAX,CAAmB,CACfZ,CAAK,CAACO,SAAN,CAAgBC,MAAhB,CAAuB,YAAvB,EACAR,CAAK,CAACO,SAAN,CAAgBO,GAAhB,CAAoB,UAApB,EACAT,CAAc,CAACU,SAAf,CAA2BH,CAAM,CAACI,OAAlC,CACAX,CAAc,CAACE,SAAf,CAAyBC,MAAzB,CAAgC,aAAhC,EACAH,CAAc,CAACE,SAAf,CAAyBO,GAAzB,CAA6B,cAA7B,EAEAG,UAAU,CAAC,UAAW,CAClBC,MAAM,CAACC,QAAP,CAAkBP,CAAM,CAACQ,MAC5B,CAFS,CAEP,GAFO,CAGb,CAVD,IAUO,CACHpB,CAAK,CAACO,SAAN,CAAgBO,GAAhB,CAAoB,YAApB,EACAT,CAAc,CAACU,SAAf,CAA2BH,CAAM,CAACI,OAAlC,CACAX,CAAc,CAACE,SAAf,CAAyBO,GAAzB,CAA6B,aAA7B,CACH,CAER,CApBD,EAoBGO,KApBH,EAqBH,CACJ,CAhCD,CAiCH,CA1CW,CAqDRC,CAAqB,CAAG,SAASC,CAAT,CAAwBC,CAAxB,CAAoCC,CAApC,CAA8CC,CAA9C,CAAqD,CAC7EH,CAAa,CAACI,SAAd,CAA0B,EAA1B,CAD6E,GAIzEC,CAAAA,CAAc,CAAGxC,CAAW,CAACyC,kBAAZ,CAA+BN,CAA/B,CAJwD,CAOzEO,CAAyB,CAAG,IAP6C,CAQzEC,CAAiB,CAAG,GAAIC,CAAAA,OAAJ,CAAY,SAAAnB,CAAO,CAAI,CAC3CiB,CAAyB,CAAGjB,CAC/B,CAFuB,CARqD,CAY7EtB,CAAC,CAAC0C,IAAF,CACIL,CADJ,CAEIG,CAFJ,EAGEpB,IAHF,CAGO,UAAW,CACVtB,CAAS,CAAC6C,mBAAV,CAA8BX,CAA9B,CAA6CC,CAAU,CAACW,sBAAxD,CAAgF,EAAhF,CAEP,CAND,EAMGd,KANH,CAMS/B,CAAY,CAAC8C,SANtB,EASA5C,CAAsB,CAAC+B,CAAD,CAAtB,CAGAE,CAAQ,CAACY,GAAT,CAAa,kBAAb,CAAiC,UAAW,CACxCP,CAAyB,EAC5B,CAFD,EAIAL,CAAQ,CAACA,QAAT,CAAkB,CAAlB,EAEAC,CAAK,CAACY,SAAN,CAAgBjD,CAAS,CAACkD,MAAV,CAAiB,0CAAjB,CAA6D,EAA7D,CAAhB,CACH,CApFW,CA8FRC,CAAuB,CAAG,SAASf,CAAT,CAAmBC,CAAnB,CAA0BF,CAA1B,CAAsC,CAEhEC,CAAQ,CAACA,QAAT,CAAkB,CAAlB,EACAC,CAAK,CAACY,SAAN,CAAgBd,CAAU,CAACiB,oBAA3B,CACH,CAlGW,CA2HZ,MAAO,CACHC,mBAAmB,CAjBG,QAAtBA,CAAAA,mBAAsB,CAAS/C,CAAT,CAAY6B,CAAZ,CAAwBE,CAAxB,CAA+B,CACrD,GAAI/B,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiByB,aAAlC,GAAoD5B,CAAC,CAACC,MAAF,CAAS+C,OAAT,CAAiBxD,CAAS,CAACW,MAAV,CAAiByB,aAAlC,CAAxD,CAA0G,CACtG5B,CAAC,CAACiD,cAAF,GADsG,GAEhGnB,CAAAA,CAAQ,CAAGlC,CAAC,CAACmC,CAAK,CAACmB,OAAN,GAAgB,CAAhB,EAAmB5C,aAAnB,CAAiCd,CAAS,CAACgB,MAAV,CAAiBsB,QAAlD,CAAD,CAFoF,CAGhGF,CAAa,CAAGE,CAAQ,CAACqB,IAAT,CAAc3D,CAAS,CAACgB,MAAV,CAAiB4C,SAA/B,EAA0C,CAA1C,CAHgF,CAKtGzB,CAAqB,CAACC,CAAD,CAAgBC,CAAhB,CAA4BC,CAA5B,CAAsCC,CAAtC,CACxB,CAED,GAAI/B,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBV,CAAS,CAACW,MAAV,CAAiBkD,WAAlC,CAAJ,CAAoD,CAChD,GAAMvB,CAAAA,CAAQ,CAAGlC,CAAC,CAACmC,CAAK,CAACmB,OAAN,GAAgB,CAAhB,EAAmB5C,aAAnB,CAAiCd,CAAS,CAACgB,MAAV,CAAiBsB,QAAlD,CAAD,CAAlB,CAEAe,CAAuB,CAACf,CAAD,CAAWC,CAAX,CAAkBF,CAAlB,CAC1B,CACJ,CAEM,CAGV,CAzIK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Our basic form manager for when a user either enters\n * their profile url or just wants to browse.\n *\n * This file is a mishmash of JS functions we need for both the standalone (M3.7, M3.8)\n * plugin & Moodle 3.9 functions. The 3.9 Functions have a base understanding that certain\n * things exist i.e. directory structures for templates. When this feature goes 3.9+ only\n * The goal is that we can quickly gut all AMD modules into bare JS files and use ES6 guidelines.\n * Till then this will have to do.\n *\n * @module     tool_moodlenet/instance_form\n * @package    tool_moodlenet\n * @copyright  2020 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(['tool_moodlenet/validator',\n        'tool_moodlenet/selectors',\n        'core/loadingicon',\n        'core/templates',\n        'core/notification',\n        'jquery'],\n    function(Validator,\n             Selectors,\n             LoadingIcon,\n             Templates,\n             Notification,\n             $) {\n\n    /**\n     * Add the event listeners to our form.\n     *\n     * @method registerListenerEvents\n     * @param {HTMLElement} page The whole page element for our form area\n     */\n    var registerListenerEvents = function registerListenerEvents(page) {\n        page.addEventListener('click', function(e) {\n\n            // Our fake submit button / browse button.\n            if (e.target.matches(Selectors.action.submit)) {\n                var input = page.querySelector('[data-var=\"mnet-link\"]');\n                var overlay = page.querySelector(Selectors.region.spinner);\n                var validationArea = document.querySelector(Selectors.region.validationArea);\n\n                overlay.classList.remove('d-none');\n                var spinner = LoadingIcon.addIconToContainerWithPromise(overlay);\n                Validator.validation(input)\n                    .then(function(result) {\n                        spinner.resolve();\n                        overlay.classList.add('d-none');\n                        if (result.result) {\n                            input.classList.remove('is-invalid'); // Just in case the class has been applied already.\n                            input.classList.add('is-valid');\n                            validationArea.innerText = result.message;\n                            validationArea.classList.remove('text-danger');\n                            validationArea.classList.add('text-success');\n                            // Give the user some time to see their input is valid.\n                            setTimeout(function() {\n                                window.location = result.domain;\n                            }, 1000);\n                        } else {\n                            input.classList.add('is-invalid');\n                            validationArea.innerText = result.message;\n                            validationArea.classList.add('text-danger');\n                        }\n                        return;\n                }).catch();\n            }\n        });\n    };\n\n    /**\n     * Given a user wishes to see the MoodleNet profile url form transition them there.\n     *\n     * @method chooserNavigateToMnet\n     * @param {HTMLElement} showMoodleNet The chooser's area for ment\n     * @param {Object} footerData Our footer object to render out\n     * @param {jQuery} carousel Our carousel instance to manage\n     * @param {jQuery} modal Our modal instance to manage\n     */\n    var chooserNavigateToMnet = function(showMoodleNet, footerData, carousel, modal) {\n        showMoodleNet.innerHTML = '';\n\n        // Add a spinner.\n        var spinnerPromise = LoadingIcon.addIconToContainer(showMoodleNet);\n\n        // Used later...\n        var transitionPromiseResolver = null;\n        var transitionPromise = new Promise(resolve => {\n            transitionPromiseResolver = resolve;\n        });\n\n        $.when(\n            spinnerPromise,\n            transitionPromise\n        ).then(function() {\n                Templates.replaceNodeContents(showMoodleNet, footerData.customcarouseltemplate, '');\n                return;\n        }).catch(Notification.exception);\n\n        // We apply our handlers in here to minimise plugin dependency in the Chooser.\n        registerListenerEvents(showMoodleNet);\n\n        // Move to the next slide, and resolve the transition promise when it's done.\n        carousel.one('slid.bs.carousel', function() {\n            transitionPromiseResolver();\n        });\n        // Trigger the transition between 'pages'.\n        carousel.carousel(2);\n        // eslint-disable-next-line max-len\n        modal.setFooter(Templates.render('tool_moodlenet/chooser_footer_close_mnet', {}));\n    };\n\n    /**\n     * Given a user no longer wishes to see the MoodleNet profile url form transition them from there.\n     *\n     * @method chooserNavigateFromMnet\n     * @param {jQuery} carousel Our carousel instance to manage\n     * @param {jQuery} modal Our modal instance to manage\n     * @param {Object} footerData Our footer object to render out\n     */\n    var chooserNavigateFromMnet = function(carousel, modal, footerData) {\n        // Trigger the transition between 'pages'.\n        carousel.carousel(0);\n        modal.setFooter(footerData.customfootertemplate);\n    };\n\n        /**\n         * Create the custom listener that would handle anything in the footer.\n         *\n         * @param {Event} e The event being triggered.\n         * @param {Object} footerData The data generated from the exporter.\n         * @param {Object} modal The chooser modal.\n         */\n    var footerClickListener = function(e, footerData, modal) {\n        if (e.target.matches(Selectors.action.showMoodleNet) || e.target.closest(Selectors.action.showMoodleNet)) {\n            e.preventDefault();\n            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));\n            const showMoodleNet = carousel.find(Selectors.region.moodleNet)[0];\n\n            chooserNavigateToMnet(showMoodleNet, footerData, carousel, modal);\n        }\n        // From the help screen go back to the module overview.\n        if (e.target.matches(Selectors.action.closeOption)) {\n            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));\n\n            chooserNavigateFromMnet(carousel, modal, footerData);\n        }\n    };\n\n    return {\n        footerClickListener: footerClickListener\n    };\n});\n"],"file":"instance_form.min.js"}
\ No newline at end of file
diff --git a/admin/tool/moodlenet/amd/src/instance_form.js b/admin/tool/moodlenet/amd/src/instance_form.js
index a1443a0d51e..cc0580e56de 100644
--- a/admin/tool/moodlenet/amd/src/instance_form.js
+++ b/admin/tool/moodlenet/amd/src/instance_form.js
@@ -67,7 +67,7 @@ define(['tool_moodlenet/validator',
                             input.classList.remove('is-invalid'); // Just in case the class has been applied already.
                             input.classList.add('is-valid');
                             validationArea.innerText = result.message;
-                            validationArea.classList.remove('text-error');
+                            validationArea.classList.remove('text-danger');
                             validationArea.classList.add('text-success');
                             // Give the user some time to see their input is valid.
                             setTimeout(function() {
@@ -76,7 +76,7 @@ define(['tool_moodlenet/validator',
                         } else {
                             input.classList.add('is-invalid');
                             validationArea.innerText = result.message;
-                            validationArea.classList.add('text-error');
+                            validationArea.classList.add('text-danger');
                         }
                         return;
                 }).catch();
diff --git a/admin/tool/moodlenet/templates/import_confirmation.mustache b/admin/tool/moodlenet/templates/import_confirmation.mustache
index 337b22abd5e..f38cc0edf23 100644
--- a/admin/tool/moodlenet/templates/import_confirmation.mustache
+++ b/admin/tool/moodlenet/templates/import_confirmation.mustache
@@ -53,7 +53,7 @@
 
             <input type="hidden" name="resourceurl" value="{{resourceurl}}">
             <input type="hidden" name="sesskey" value="{{sesskey}}">
-            <div class="box py-3 modal-header p-x-1">
+            <div class="box py-3 modal-header px-3">
                 <h4>{{#str}}confirm, core{{/str}}</h4>
             </div>
             <div class="box py-3 modal-body">
diff --git a/admin/tool/moodlenet/templates/import_options_select.mustache b/admin/tool/moodlenet/templates/import_options_select.mustache
index 9dc42ebdd6a..f22566e3aa5 100644
--- a/admin/tool/moodlenet/templates/import_options_select.mustache
+++ b/admin/tool/moodlenet/templates/import_options_select.mustache
@@ -58,7 +58,7 @@
             <input type="hidden" name="section" value="{{section}}">
             <input type="hidden" name="resourceurl" value="{{resourceurl}}">
             <input type="hidden" name="sesskey" value="{{sesskey}}">
-            <div class="box py-3 modal-header p-x-1">
+            <div class="box py-3 modal-header px-3">
                 <h4>{{#str}}importformatselectheader, tool_moodlenet{{/str}}</h4>
             </div>
             <div class="box py-3 modal-body">
diff --git a/analytics/templates/insight_info_message_prediction.mustache b/analytics/templates/insight_info_message_prediction.mustache
index 6e66e8a23dd..ed1d0e6d79d 100644
--- a/analytics/templates/insight_info_message_prediction.mustache
+++ b/analytics/templates/insight_info_message_prediction.mustache
@@ -43,7 +43,7 @@
 <br/>
 
 {{#actions}}
-    <a class="btn btn-outline-primary m-r-1 m-b-1 btn-insight" href="{{url}}">{{text}}</a><br/><br/>
+    <a class="btn btn-outline-primary mr-3 mb-3 btn-insight" href="{{url}}">{{text}}</a><br/><br/>
 {{/actions}}
 
 {{#usefulbuttons}}
diff --git a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
index 5212364500a..4d5827fe489 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
@@ -25,7 +25,7 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+    var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
                ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
diff --git a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
index 67acacbf734..3c31ebec29f 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_completion-form",function(o,e){M.availability_completion=M.availability_completion||{},M.availability_completion.form=o.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(e){var i,l,t,a='<span class="col-form-label p-r-1"> '+M.util.get_string("title","availability_completion")+'</span> <span class="availability-group form-group"><label><span class="accesshide">'+M.util.get_string("label_cm","availability_completion")+' </span><select class="custom-select" name="cm" title="'+M.util.get_string("label_cm","availability_completion")+'"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(i=0;i<this.cms.length;i++)a+='<option value="'+(l=this.cms[i]).id+'">'+l.name+"</option>";return a+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_completion","availability_completion")+' </span><select class="custom-select" name="e" title="'+M.util.get_string("label_completion","availability_completion")+'"><option value="1">'+M.util.get_string("option_complete","availability_completion")+'</option><option value="0">'+M.util.get_string("option_incomplete","availability_completion")+'</option><option value="2">'+M.util.get_string("option_pass","availability_completion")+'</option><option value="3">'+M.util.get_string("option_fail","availability_completion")+"</option></select></label></span>",t=o.Node.create('<span class="form-inline">'+a+"</span>"),e.cm!==undefined&&t.one("select[name=cm] > option[value="+e.cm+"]")&&t.one("select[name=cm]").set("value",""+e.cm),e.e!==undefined&&t.one("select[name=e]").set("value",""+e.e),M.availability_completion.form.addedEvents||(M.availability_completion.form.addedEvents=!0,o.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_completion select")),t},M.availability_completion.form.fillValue=function(e,i){e.cm=parseInt(i.one("select[name=cm]").get("value"),10),e.e=parseInt(i.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(i,e){var l,t=parseInt(e.one("select[name=cm]").get("value"),10);0===t&&i.push("availability_completion:error_selectcmid"),2!==(l=parseInt(e.one("select[name=e]").get("value"),10))&&3!==l||this.cms.forEach(function(e){e.id===t&&null===e.completiongradeitemnumber&&i.push("availability_completion:error_selectcmidpassfail")})}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_completion-form",function(o,e){M.availability_completion=M.availability_completion||{},M.availability_completion.form=o.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(e){var i,l,t,a='<span class="col-form-label pr-3"> '+M.util.get_string("title","availability_completion")+'</span> <span class="availability-group form-group"><label><span class="accesshide">'+M.util.get_string("label_cm","availability_completion")+' </span><select class="custom-select" name="cm" title="'+M.util.get_string("label_cm","availability_completion")+'"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(i=0;i<this.cms.length;i++)a+='<option value="'+(l=this.cms[i]).id+'">'+l.name+"</option>";return a+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_completion","availability_completion")+' </span><select class="custom-select" name="e" title="'+M.util.get_string("label_completion","availability_completion")+'"><option value="1">'+M.util.get_string("option_complete","availability_completion")+'</option><option value="0">'+M.util.get_string("option_incomplete","availability_completion")+'</option><option value="2">'+M.util.get_string("option_pass","availability_completion")+'</option><option value="3">'+M.util.get_string("option_fail","availability_completion")+"</option></select></label></span>",t=o.Node.create('<span class="form-inline">'+a+"</span>"),e.cm!==undefined&&t.one("select[name=cm] > option[value="+e.cm+"]")&&t.one("select[name=cm]").set("value",""+e.cm),e.e!==undefined&&t.one("select[name=e]").set("value",""+e.e),M.availability_completion.form.addedEvents||(M.availability_completion.form.addedEvents=!0,o.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_completion select")),t},M.availability_completion.form.fillValue=function(e,i){e.cm=parseInt(i.one("select[name=cm]").get("value"),10),e.e=parseInt(i.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(i,e){var l,t=parseInt(e.one("select[name=cm]").get("value"),10);0===t&&i.push("availability_completion:error_selectcmid"),2!==(l=parseInt(e.one("select[name=e]").get("value"),10))&&3!==l||this.cms.forEach(function(e){e.id===t&&null===e.completiongradeitemnumber&&i.push("availability_completion:error_selectcmidpassfail")})}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
index 5212364500a..4d5827fe489 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
@@ -25,7 +25,7 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+    var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
                ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
diff --git a/availability/condition/completion/yui/src/form/js/form.js b/availability/condition/completion/yui/src/form/js/form.js
index 77c9cf1e71f..2ccf97cd743 100644
--- a/availability/condition/completion/yui/src/form/js/form.js
+++ b/availability/condition/completion/yui/src/form/js/form.js
@@ -23,7 +23,7 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+    var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
                ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
index 71cc687cc3f..c4eb06b60d1 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
@@ -29,7 +29,7 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = '<span class="col-form-label p-r-1">' +
+    var html = '<span class="col-form-label pr-3">' +
                     M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
             '<select name="direction" class="custom-select">' +
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
index 42a4d651cab..4235144f9b4 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_date-form",function(s,e){M.availability_date=M.availability_date||{},M.availability_date.form=s.Object(M.core_availability.plugin),M.availability_date.form.initInner=function(e,a){this.html=e,this.defaultTime=a},M.availability_date.form.getNode=function(e){var a,t,i,l,n='<span class="col-form-label p-r-1">'+M.util.get_string("direction_before","availability_date")+'</span> <span class="availability-group"><label><span class="accesshide">'+M.util.get_string("direction_label","availability_date")+' </span><select name="direction" class="custom-select"><option value="&gt;=">'+M.util.get_string("direction_from","availability_date")+'</option><option value="&lt;">'+M.util.get_string("direction_until","availability_date")+"</option></select></label></span> "+this.html,o=s.Node.create("<span>"+n+"</span>");return e.t!==undefined?(o.setData("time",e.t),o.all("select:not([name=direction])").each(function(e){e.set("disabled",!0)}),a=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=fromtime&time="+e.t,s.io(a,{on:{success:function(e,a){var t,i,l=s.JSON.parse(a.responseText);for(t in l)(i=o.one("select[name=x\\["+t+"\\]]")).set("value",""+l[t]),i.set("disabled",!1)},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})):o.setData("time",this.defaultTime),e.d!==undefined&&o.one("select[name=direction]").set("value",e.d),M.availability_date.form.addedEvents||(M.availability_date.form.addedEvents=!0,(t=s.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_date select[name=direction]"),t.delegate("change",function(){M.availability_date.form.updateTime(this.ancestor("span.availability_date"))},".availability_date select:not([name=direction])")),o.one("a[href=#]")&&(M.form.dateselector.init_single_date_selector(o),i=o.one("select[name=x\\[year\\]]"),l=i.set,i.set=function(e,a){l.call(i,e,a),"selectedIndex"===e&&setTimeout(function(){M.availability_date.form.updateTime(o)},0)}),o},M.availability_date.form.updateTime=function(t){var e=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=totime&year="+t.one("select[name=x\\[year\\]]").get("value")+"&month="+t.one("select[name=x\\[month\\]]").get("value")+"&day="+t.one("select[name=x\\[day\\]]").get("value")+"&hour="+t.one("select[name=x\\[hour\\]]").get("value")+"&minute="+t.one("select[name=x\\[minute\\]]").get("value");s.io(e,{on:{success:function(e,a){t.setData("time",a.responseText),M.core_availability.form.update()},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})},M.availability_date.form.fillValue=function(e,a){e.d=a.one("select[name=direction]").get("value"),e.t=parseInt(a.getData("time"),10)}},"@VERSION@",{requires:["base","node","event","io","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_date-form",function(s,e){M.availability_date=M.availability_date||{},M.availability_date.form=s.Object(M.core_availability.plugin),M.availability_date.form.initInner=function(e,a){this.html=e,this.defaultTime=a},M.availability_date.form.getNode=function(e){var a,t,i,l,n='<span class="col-form-label pr-3">'+M.util.get_string("direction_before","availability_date")+'</span> <span class="availability-group"><label><span class="accesshide">'+M.util.get_string("direction_label","availability_date")+' </span><select name="direction" class="custom-select"><option value="&gt;=">'+M.util.get_string("direction_from","availability_date")+'</option><option value="&lt;">'+M.util.get_string("direction_until","availability_date")+"</option></select></label></span> "+this.html,o=s.Node.create("<span>"+n+"</span>");return e.t!==undefined?(o.setData("time",e.t),o.all("select:not([name=direction])").each(function(e){e.set("disabled",!0)}),a=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=fromtime&time="+e.t,s.io(a,{on:{success:function(e,a){var t,i,l=s.JSON.parse(a.responseText);for(t in l)(i=o.one("select[name=x\\["+t+"\\]]")).set("value",""+l[t]),i.set("disabled",!1)},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})):o.setData("time",this.defaultTime),e.d!==undefined&&o.one("select[name=direction]").set("value",e.d),M.availability_date.form.addedEvents||(M.availability_date.form.addedEvents=!0,(t=s.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_date select[name=direction]"),t.delegate("change",function(){M.availability_date.form.updateTime(this.ancestor("span.availability_date"))},".availability_date select:not([name=direction])")),o.one("a[href=#]")&&(M.form.dateselector.init_single_date_selector(o),i=o.one("select[name=x\\[year\\]]"),l=i.set,i.set=function(e,a){l.call(i,e,a),"selectedIndex"===e&&setTimeout(function(){M.availability_date.form.updateTime(o)},0)}),o},M.availability_date.form.updateTime=function(t){var e=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=totime&year="+t.one("select[name=x\\[year\\]]").get("value")+"&month="+t.one("select[name=x\\[month\\]]").get("value")+"&day="+t.one("select[name=x\\[day\\]]").get("value")+"&hour="+t.one("select[name=x\\[hour\\]]").get("value")+"&minute="+t.one("select[name=x\\[minute\\]]").get("value");s.io(e,{on:{success:function(e,a){t.setData("time",a.responseText),M.core_availability.form.update()},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})},M.availability_date.form.fillValue=function(e,a){e.d=a.one("select[name=direction]").get("value"),e.t=parseInt(a.getData("time"),10)}},"@VERSION@",{requires:["base","node","event","io","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
index 71cc687cc3f..c4eb06b60d1 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
@@ -29,7 +29,7 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = '<span class="col-form-label p-r-1">' +
+    var html = '<span class="col-form-label pr-3">' +
                     M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
             '<select name="direction" class="custom-select">' +
diff --git a/availability/condition/date/yui/src/form/js/form.js b/availability/condition/date/yui/src/form/js/form.js
index 30e36fec2fa..1d1656c6ac2 100644
--- a/availability/condition/date/yui/src/form/js/form.js
+++ b/availability/condition/date/yui/src/form/js/form.js
@@ -27,7 +27,7 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = '<span class="col-form-label p-r-1">' +
+    var html = '<span class="col-form-label pr-3">' +
                     M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
             '<select name="direction" class="custom-select">' +
diff --git a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
index cc76dd5ab59..8867dcca389 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
@@ -37,7 +37,7 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
diff --git a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
index 9f523aa6feb..0e71a081388 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_grade-form",function(o,a){M.availability_grade=M.availability_grade||{},M.availability_grade.form=o.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(a){this.grades=a,this.nodesSoFar=0},M.availability_grade.form.getNode=function(a){var e,i,l,t,n,r;for(this.nodesSoFar++,e='<label class="form-group"><span class="p-r-1">'+M.util.get_string("title","availability_grade")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>",i=0;i<this.grades.length;i++)e+='<option value="'+(l=this.grades[i]).id+'">'+l.name+"</option>";return e+='</select></span></label> <br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="min"/>'+M.util.get_string("option_min","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_min","availability_grade")+'</span><input type="text" class="form-control mx-1" name="minval" title="'+M.util.get_string("label_min","availability_grade")+'"/></label>%</span><br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="max"/>'+M.util.get_string("option_max","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_max","availability_grade")+'</span><input type="text" class="form-control mx-1" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>',t=o.Node.create('<div class="d-inline-block form-inline">'+e+"</div>"),a.id!==undefined&&t.one("select[name=id] > option[value="+a.id+"]")&&t.one("select[name=id]").set("value",""+a.id),a.min!==undefined&&(t.one("input[name=min]").set("checked",!0),t.one("input[name=minval]").set("value",a.min)),a.max!==undefined&&(t.one("input[name=max]").set("checked",!0),t.one("input[name=maxval]").set("value",a.max)),n=function(a,e){var i=a.ancestor("label").next("label").one("input"),l=a.get("checked");return i.set("disabled",!l),e&&l&&i.focus(),l},t.all("input[type=checkbox]").each(n),M.availability_grade.form.addedEvents||(M.availability_grade.form.addedEvents=!0,(r=o.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),r.delegate("click",function(){n(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),r.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")),t},M.availability_grade.form.fillValue=function(a,e){a.id=parseInt(e.one("select[name=id]").get("value"),10),e.one("input[name=min]").get("checked")&&(a.min=this.getValue("minval",e)),e.one("input[name=max]").get("checked")&&(a.max=this.getValue("maxval",e))},M.availability_grade.form.getValue=function(a,e){var i,l=e.one("input[name="+a+"]").get("value");return!/^[0-9]+([.,][0-9]+)?$/.test(l)||(i=parseFloat(l.replace(",",".")))<0||100<i?l:i},M.availability_grade.form.fillErrors=function(a,e){var i={};this.fillValue(i,e),0===i.id&&a.push("availability_grade:error_selectgradeid"),i.min!==undefined&&"string"==typeof i.min||i.max!==undefined&&"string"==typeof i.max?a.push("availability_grade:error_invalidnumber"):i.min!==undefined&&i.max!==undefined&&i.max<=i.min&&a.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_grade-form",function(o,a){M.availability_grade=M.availability_grade||{},M.availability_grade.form=o.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(a){this.grades=a,this.nodesSoFar=0},M.availability_grade.form.getNode=function(a){var e,i,l,t,n,r;for(this.nodesSoFar++,e='<label class="form-group"><span class="pr-3">'+M.util.get_string("title","availability_grade")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>",i=0;i<this.grades.length;i++)e+='<option value="'+(l=this.grades[i]).id+'">'+l.name+"</option>";return e+='</select></span></label> <br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="min"/>'+M.util.get_string("option_min","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_min","availability_grade")+'</span><input type="text" class="form-control mx-1" name="minval" title="'+M.util.get_string("label_min","availability_grade")+'"/></label>%</span><br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="max"/>'+M.util.get_string("option_max","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_max","availability_grade")+'</span><input type="text" class="form-control mx-1" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>',t=o.Node.create('<div class="d-inline-block form-inline">'+e+"</div>"),a.id!==undefined&&t.one("select[name=id] > option[value="+a.id+"]")&&t.one("select[name=id]").set("value",""+a.id),a.min!==undefined&&(t.one("input[name=min]").set("checked",!0),t.one("input[name=minval]").set("value",a.min)),a.max!==undefined&&(t.one("input[name=max]").set("checked",!0),t.one("input[name=maxval]").set("value",a.max)),n=function(a,e){var i=a.ancestor("label").next("label").one("input"),l=a.get("checked");return i.set("disabled",!l),e&&l&&i.focus(),l},t.all("input[type=checkbox]").each(n),M.availability_grade.form.addedEvents||(M.availability_grade.form.addedEvents=!0,(r=o.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),r.delegate("click",function(){n(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),r.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")),t},M.availability_grade.form.fillValue=function(a,e){a.id=parseInt(e.one("select[name=id]").get("value"),10),e.one("input[name=min]").get("checked")&&(a.min=this.getValue("minval",e)),e.one("input[name=max]").get("checked")&&(a.max=this.getValue("maxval",e))},M.availability_grade.form.getValue=function(a,e){var i,l=e.one("input[name="+a+"]").get("value");return!/^[0-9]+([.,][0-9]+)?$/.test(l)||(i=parseFloat(l.replace(",",".")))<0||100<i?l:i},M.availability_grade.form.fillErrors=function(a,e){var i={};this.fillValue(i,e),0===i.id&&a.push("availability_grade:error_selectgradeid"),i.min!==undefined&&"string"==typeof i.min||i.max!==undefined&&"string"==typeof i.max?a.push("availability_grade:error_invalidnumber"):i.min!==undefined&&i.max!==undefined&&i.max<=i.min&&a.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
index cc76dd5ab59..8867dcca389 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
@@ -37,7 +37,7 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
diff --git a/availability/condition/grade/yui/src/form/js/form.js b/availability/condition/grade/yui/src/form/js/form.js
index 1957d9a02e0..4927e6af402 100644
--- a/availability/condition/grade/yui/src/form/js/form.js
+++ b/availability/condition/grade/yui/src/form/js/form.js
@@ -35,7 +35,7 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
index e6272f908f0..0ce2ef379b9 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
@@ -33,7 +33,7 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_group') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
index bc869321417..9f642235e6d 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_group-form",function(t,i){M.availability_group=M.availability_group||{},M.availability_group.form=t.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(i){this.groups=i},M.availability_group.form.getNode=function(i){var a,e,l,o='<label><span class="p-r-1">'+M.util.get_string("title","availability_group")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+'</option><option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>";for(a=0;a<this.groups.length;a++)o+='<option value="'+(e=this.groups[a]).id+'">'+e.name+"</option>";return o+="</select></span></label>",l=t.Node.create('<span class="form-inline">'+o+"</span>"),i.creating===undefined&&(i.id!==undefined&&l.one("select[name=id] > option[value="+i.id+"]")?l.one("select[name=id]").set("value",""+i.id):i.id===undefined&&l.one("select[name=id]").set("value","any")),M.availability_group.form.addedEvents||(M.availability_group.form.addedEvents=!0,t.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_group select")),l},M.availability_group.form.fillValue=function(i,a){var e=a.one("select[name=id]").get("value");"choose"===e?i.id="choose":"any"!==e&&(i.id=parseInt(e,10))},M.availability_group.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),e.id&&"choose"===e.id&&i.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_group-form",function(t,i){M.availability_group=M.availability_group||{},M.availability_group.form=t.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(i){this.groups=i},M.availability_group.form.getNode=function(i){var a,e,l,o='<label><span class="pr-3">'+M.util.get_string("title","availability_group")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+'</option><option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>";for(a=0;a<this.groups.length;a++)o+='<option value="'+(e=this.groups[a]).id+'">'+e.name+"</option>";return o+="</select></span></label>",l=t.Node.create('<span class="form-inline">'+o+"</span>"),i.creating===undefined&&(i.id!==undefined&&l.one("select[name=id] > option[value="+i.id+"]")?l.one("select[name=id]").set("value",""+i.id):i.id===undefined&&l.one("select[name=id]").set("value","any")),M.availability_group.form.addedEvents||(M.availability_group.form.addedEvents=!0,t.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_group select")),l},M.availability_group.form.fillValue=function(i,a){var e=a.one("select[name=id]").get("value");"choose"===e?i.id="choose":"any"!==e&&(i.id=parseInt(e,10))},M.availability_group.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),e.id&&"choose"===e.id&&i.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
index e6272f908f0..0ce2ef379b9 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
@@ -33,7 +33,7 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_group') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
diff --git a/availability/condition/group/yui/src/form/js/form.js b/availability/condition/group/yui/src/form/js/form.js
index 6c253614a5a..d89ae087074 100644
--- a/availability/condition/group/yui/src/form/js/form.js
+++ b/availability/condition/group/yui/src/form/js/form.js
@@ -31,7 +31,7 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_group') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
index 6dd1a72de30..1eb8f260d97 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
@@ -33,7 +33,7 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
index 4430bd6dc8d..19802037577 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_grouping-form",function(n,i){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=n.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(i){this.groupings=i},M.availability_grouping.form.getNode=function(i){var a,e,l,o='<label><span class="p-r-1">'+M.util.get_string("title","availability_grouping")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(a=0;a<this.groupings.length;a++)o+='<option value="'+(e=this.groupings[a]).id+'">'+e.name+"</option>";return o+="</select></span></label>",l=n.Node.create('<span class="form-inline">'+o+"</span>"),i.id!==undefined&&l.one("select[name=id] > option[value="+i.id+"]")&&l.one("select[name=id]").set("value",""+i.id),M.availability_grouping.form.addedEvents||(M.availability_grouping.form.addedEvents=!0,n.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")),l},M.availability_grouping.form.fillValue=function(i,a){var e=a.one("select[name=id]").get("value");i.id="choose"===e?"choose":parseInt(e,10)},M.availability_grouping.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),"choose"===e.id&&i.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_grouping-form",function(n,i){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=n.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(i){this.groupings=i},M.availability_grouping.form.getNode=function(i){var a,e,l,o='<label><span class="pr-3">'+M.util.get_string("title","availability_grouping")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(a=0;a<this.groupings.length;a++)o+='<option value="'+(e=this.groupings[a]).id+'">'+e.name+"</option>";return o+="</select></span></label>",l=n.Node.create('<span class="form-inline">'+o+"</span>"),i.id!==undefined&&l.one("select[name=id] > option[value="+i.id+"]")&&l.one("select[name=id]").set("value",""+i.id),M.availability_grouping.form.addedEvents||(M.availability_grouping.form.addedEvents=!0,n.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")),l},M.availability_grouping.form.fillValue=function(i,a){var e=a.one("select[name=id]").get("value");i.id="choose"===e?"choose":parseInt(e,10)},M.availability_grouping.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),"choose"===e.id&&i.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
index 6dd1a72de30..1eb8f260d97 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
@@ -33,7 +33,7 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/condition/grouping/yui/src/form/js/form.js b/availability/condition/grouping/yui/src/form/js/form.js
index 41523859efd..f8e596facd1 100644
--- a/availability/condition/grouping/yui/src/form/js/form.js
+++ b/availability/condition/grouping/yui/src/form/js/form.js
@@ -31,7 +31,7 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+    var html = '<label><span class="pr-3">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
index f47ec110a2b..c4fb5a4295e 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
@@ -35,7 +35,7 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+    var html = '<span class="availability-group"><label><span class="pr-3">' +
             M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
             '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
index 945137ab227..38bb84f55eb 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_profile-form",function(f,e){M.availability_profile=M.availability_profile||{},M.availability_profile.form=f.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,i){this.standardFields=e,this.customFields=i},M.availability_profile.form.getNode=function(e){var i,l,a,t,o,s,n='<span class="availability-group"><label><span class="p-r-1">'+M.util.get_string("conditiontitle","availability_profile")+'</span> <select name="field" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(l=0;l<this.standardFields.length;l++)n+='<option value="sf_'+(i=this.standardFields[l]).field+'">'+i.display+"</option>";for(l=0;l<this.customFields.length;l++)n+='<option value="cf_'+(i=this.customFields[l]).field+'">'+i.display+"</option>";for(n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'" class="custom-select">',a=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"],l=0;l<a.length;l++)n+='<option value="'+a[l]+'">'+M.util.get_string("op_"+a[l],"availability_profile")+"</option>";return n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" class="form-control" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>',t=f.Node.create('<span class="form-inline">'+n+"</span>"),e.sf!==undefined&&t.one("select[name=field] > option[value=sf_"+e.sf+"]")?t.one("select[name=field]").set("value","sf_"+e.sf):e.cf!==undefined&&t.one("select[name=field] > option[value=cf_"+e.cf+"]")&&t.one("select[name=field]").set("value","cf_"+e.cf),e.op!==undefined&&t.one("select[name=op] > option[value="+e.op+"]")&&(t.one("select[name=op]").set("value",e.op),"isempty"!==e.op&&"isnotempty"!==e.op||t.one("input[name=value]").set("disabled",!0)),e.v!==undefined&&t.one("input").set("value",e.v),M.availability_profile.form.addedEvents||(M.availability_profile.form.addedEvents=!0,o=function(e){var i=e.ancestor("span.availability_profile"),l=i.one("select[name=op]"),a="isempty"===l.get("value")||"isnotempty"===l.get("value");i.one("input[name=value]").set("disabled",a),M.core_availability.form.update()},(s=f.one(".availability-field")).delegate("change",function(){o(this)},".availability_profile select"),s.delegate("change",function(){o(this)},".availability_profile input[name=value]")),t},M.availability_profile.form.fillValue=function(e,i){var l,a=i.one("select[name=field]").get("value");"sf_"===a.substr(0,3)?e.sf=a.substr(3):"cf_"===a.substr(0,3)&&(e.cf=a.substr(3)),e.op=i.one("select[name=op]").get("value"),(l=i.one("input[name=value]")).get("disabled")||(e.v=l.get("value"))},M.availability_profile.form.fillErrors=function(e,i){var l={};this.fillValue(l,i),l.sf===undefined&&l.cf===undefined&&e.push("availability_profile:error_selectfield"),l.v!==undefined&&/^\s*$/.test(l.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_profile-form",function(f,e){M.availability_profile=M.availability_profile||{},M.availability_profile.form=f.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,i){this.standardFields=e,this.customFields=i},M.availability_profile.form.getNode=function(e){var i,l,a,t,o,s,n='<span class="availability-group"><label><span class="pr-3">'+M.util.get_string("conditiontitle","availability_profile")+'</span> <select name="field" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(l=0;l<this.standardFields.length;l++)n+='<option value="sf_'+(i=this.standardFields[l]).field+'">'+i.display+"</option>";for(l=0;l<this.customFields.length;l++)n+='<option value="cf_'+(i=this.customFields[l]).field+'">'+i.display+"</option>";for(n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'" class="custom-select">',a=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"],l=0;l<a.length;l++)n+='<option value="'+a[l]+'">'+M.util.get_string("op_"+a[l],"availability_profile")+"</option>";return n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" class="form-control" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>',t=f.Node.create('<span class="form-inline">'+n+"</span>"),e.sf!==undefined&&t.one("select[name=field] > option[value=sf_"+e.sf+"]")?t.one("select[name=field]").set("value","sf_"+e.sf):e.cf!==undefined&&t.one("select[name=field] > option[value=cf_"+e.cf+"]")&&t.one("select[name=field]").set("value","cf_"+e.cf),e.op!==undefined&&t.one("select[name=op] > option[value="+e.op+"]")&&(t.one("select[name=op]").set("value",e.op),"isempty"!==e.op&&"isnotempty"!==e.op||t.one("input[name=value]").set("disabled",!0)),e.v!==undefined&&t.one("input").set("value",e.v),M.availability_profile.form.addedEvents||(M.availability_profile.form.addedEvents=!0,o=function(e){var i=e.ancestor("span.availability_profile"),l=i.one("select[name=op]"),a="isempty"===l.get("value")||"isnotempty"===l.get("value");i.one("input[name=value]").set("disabled",a),M.core_availability.form.update()},(s=f.one(".availability-field")).delegate("change",function(){o(this)},".availability_profile select"),s.delegate("change",function(){o(this)},".availability_profile input[name=value]")),t},M.availability_profile.form.fillValue=function(e,i){var l,a=i.one("select[name=field]").get("value");"sf_"===a.substr(0,3)?e.sf=a.substr(3):"cf_"===a.substr(0,3)&&(e.cf=a.substr(3)),e.op=i.one("select[name=op]").get("value"),(l=i.one("input[name=value]")).get("disabled")||(e.v=l.get("value"))},M.availability_profile.form.fillErrors=function(e,i){var l={};this.fillValue(l,i),l.sf===undefined&&l.cf===undefined&&e.push("availability_profile:error_selectfield"),l.v!==undefined&&/^\s*$/.test(l.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
index f47ec110a2b..c4fb5a4295e 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
@@ -35,7 +35,7 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+    var html = '<span class="availability-group"><label><span class="pr-3">' +
             M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
             '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/condition/profile/yui/src/form/js/form.js b/availability/condition/profile/yui/src/form/js/form.js
index dcab53faa41..76f75e4175b 100644
--- a/availability/condition/profile/yui/src/form/js/form.js
+++ b/availability/condition/profile/yui/src/form/js/form.js
@@ -33,7 +33,7 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+    var html = '<span class="availability-group"><label><span class="pr-3">' +
             M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
             '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
index a98f863a68a..9b61ed9b3e3 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
@@ -374,7 +374,7 @@ M.core_availability.List = function(json, root, parentRoot) {
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="availability-none"><span class="px-3">' + M.util.get_string('none', 'moodle') + '</span></div>' +
             '<div class="clearfix mt-1"></div>' +
             '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
@@ -1132,7 +1132,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete px-3" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
index d2c2b71b597..5041b64d0a0 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
@@ -1,3 +1,3 @@
-YUI.add("moodle-core_availability-form",function(c,i){M.core_availability=M.core_availability||{},M.core_availability.form={plugins:{},field:null,mainDiv:null,rootList:null,idCounter:0,restrictByGroup:null,init:function(i){var t,e,a,l,n,o,s;for(t in i)e=i[t],(a=M[e[0]].form).init.apply(a,e);if(this.field=c.one("#id_availabilityconditionsjson"),this.field.setAttribute("aria-hidden","true"),this.mainDiv=c.Node.create('<div class="availability-field fcontainer"></div>'),this.field.insert(this.mainDiv,"after"),n=null,""!==(l=this.field.get("value")))try{n=c.JSON.parse(l)}catch(r){this.field.set("value","")}this.rootList=new M.core_availability.List(n,!0),this.mainDiv.appendChild(this.rootList.node),this.update(),this.rootList.renumber(),this.mainDiv.setAttribute("aria-live","polite"),this.field.ancestor("form").on("submit",function(){this.mainDiv.all("input,textarea,select").set("disabled",!0)},this),this.restrictByGroup=c.one("#restrictbygroup"),this.restrictByGroup&&(this.restrictByGroup.on("click",this.addRestrictByGroup,this),o=c.one("#id_groupmode"),s=c.one("#id_groupingid"),o&&o.on("change",this.updateRestrictByGroup,this),s&&s.on("change",this.updateRestrictByGroup,this),this.updateRestrictByGroup())},update:function(){var i=this.rootList.getValue(),t=[];this.rootList.fillErrors(t),0!==t.length&&(i.errors=t),this.field.set("value",c.JSON.stringify(i)),this.updateRestrictByGroup()},updateRestrictByGroup:function(){var i,t;this.restrictByGroup&&("&"!==this.rootList.getValue().op||(this.rootList.hasItemOfType("group")||this.rootList.hasItemOfType("grouping"))?this.restrictByGroup.set("disabled",!0):(i=c.one("#id_groupmode"),t=c.one("#id_groupingid"),i&&0!==Number(i.get("value"))||t&&0!==Number(t.get("value"))?this.restrictByGroup.set("disabled",!1):this.restrictByGroup.set("disabled",!0)))},addRestrictByGroup:function(i){var t,e;i.preventDefault(),e=(t=c.one("#id_groupingid"))&&0!==Number(t.get("value"))?new M.core_availability.Item({type:"grouping",id:Number(t.get("value"))},!0):new M.core_availability.Item({type:"group"},!0),this.rootList.addChild(e),this.update(),this.rootList.renumber(),this.rootList.updateHtml()}},M.core_availability.plugin={allowAdd:!1,init:function(i,t,e){var a=i.replace(/^availability_/,"");this.allowAdd=t,(M.core_availability.form.plugins[a]=this).initInner.apply(this,e)},initInner:function(){},getNode:function(){throw"getNode not implemented"},fillValue:function(){throw"fillValue not implemented"},fillErrors:function(){},focusAfterAdd:function(i){i.one("input:not([disabled]),select:not([disabled])").focus()}},M.core_availability.List=function(i,t,e){var a,l,n,o,s,r,d;if(this.children=[],t!==undefined&&(this.root=t),this.node=c.Node.create('<div class="availability-list"><h3 class="accesshide"></h3><div class="availability-inner"><div class="availability-header mb-1"><span>'+M.util.get_string("listheader_sign_before","availability")+'</span> <label><span class="accesshide">'+M.util.get_string("label_sign","availability")+' </span><select class="availability-neg custom-select mx-1" title="'+M.util.get_string("label_sign","availability")+'"><option value="">'+M.util.get_string("listheader_sign_pos","availability")+'</option><option value="!">'+M.util.get_string("listheader_sign_neg","availability")+'</option></select></label> <span class="availability-single">'+M.util.get_string("listheader_single","availability")+'</span><span class="availability-multi">'+M.util.get_string("listheader_multi_before","availability")+' <label><span class="accesshide">'+M.util.get_string("label_multi","availability")+' </span><select class="availability-op custom-select mx-1" title="'+M.util.get_string("label_multi","availability")+'"><option value="&">'+M.util.get_string("listheader_multi_and","availability")+'</option><option value="|">'+M.util.get_string("listheader_multi_or","availability")+"</option></select></label> "+M.util.get_string("listheader_multi_after","availability")+'</span></div><div class="availability-children"></div><div class="availability-none"><span class="p-x-1">'+M.util.get_string("none","moodle")+'</span></div><div class="clearfix mt-1"></div><div class="availability-button"></div></div><div class="clearfix"></div></div>'),t||this.node.addClass("availability-childlist d-sm-flex align-items-center"),this.inner=this.node.one("> .availability-inner"),a=!0,t?(i&&i.show!==undefined&&(a=i.show),this.eyeIcon=new M.core_availability.EyeIcon(!1,a),this.node.one(".availability-header").get("firstChild").insert(this.eyeIcon.span,"before")):e&&(i&&i.showc!==undefined&&(a=i.showc),this.eyeIcon=new M.core_availability.EyeIcon(!1,a),this.inner.insert(this.eyeIcon.span,"before")),t||(l=new M.core_availability.DeleteIcon(this),(n=this.node.one(".availability-none")).appendChild(document.createTextNode(" ")),n.appendChild(l.span),n.appendChild(c.Node.create('<span class="mt-1 badge badge-warning">'+M.util.get_string("invalid","availability")+"</span>"))),(o=c.Node.create('<button type="button" class="btn btn-secondary mt-1">'+M.util.get_string("addrestriction","availability")+"</button>")).on("click",function(){this.clickAdd()},this),this.node.one("div.availability-button").appendChild(o),i){switch(i.op){case"&":case"|":this.node.one(".availability-neg").set("value","");break;case"!&":case"!|":this.node.one(".availability-neg").set("value","!")}switch(i.op){case"&":case"!&":this.node.one(".availability-op").set("value","&");break;case"|":case"!|":this.node.one(".availability-op").set("value","|")}for(s=0;s<i.c.length;s++)r=i.c[s],this.root&&i&&i.showc!==undefined&&(r.showc=i.showc[s]),d=r.type!==undefined?new M.core_availability.Item(r,this.root):new M.core_availability.List(r,!1,this.root),this.addChild(d)}this.node.one(".availability-neg").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.node.one(".availability-op").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.updateHtml()},
+YUI.add("moodle-core_availability-form",function(c,i){M.core_availability=M.core_availability||{},M.core_availability.form={plugins:{},field:null,mainDiv:null,rootList:null,idCounter:0,restrictByGroup:null,init:function(i){var t,e,a,l,n,o,s;for(t in i)e=i[t],(a=M[e[0]].form).init.apply(a,e);if(this.field=c.one("#id_availabilityconditionsjson"),this.field.setAttribute("aria-hidden","true"),this.mainDiv=c.Node.create('<div class="availability-field fcontainer"></div>'),this.field.insert(this.mainDiv,"after"),n=null,""!==(l=this.field.get("value")))try{n=c.JSON.parse(l)}catch(r){this.field.set("value","")}this.rootList=new M.core_availability.List(n,!0),this.mainDiv.appendChild(this.rootList.node),this.update(),this.rootList.renumber(),this.mainDiv.setAttribute("aria-live","polite"),this.field.ancestor("form").on("submit",function(){this.mainDiv.all("input,textarea,select").set("disabled",!0)},this),this.restrictByGroup=c.one("#restrictbygroup"),this.restrictByGroup&&(this.restrictByGroup.on("click",this.addRestrictByGroup,this),o=c.one("#id_groupmode"),s=c.one("#id_groupingid"),o&&o.on("change",this.updateRestrictByGroup,this),s&&s.on("change",this.updateRestrictByGroup,this),this.updateRestrictByGroup())},update:function(){var i=this.rootList.getValue(),t=[];this.rootList.fillErrors(t),0!==t.length&&(i.errors=t),this.field.set("value",c.JSON.stringify(i)),this.updateRestrictByGroup()},updateRestrictByGroup:function(){var i,t;this.restrictByGroup&&("&"!==this.rootList.getValue().op||(this.rootList.hasItemOfType("group")||this.rootList.hasItemOfType("grouping"))?this.restrictByGroup.set("disabled",!0):(i=c.one("#id_groupmode"),t=c.one("#id_groupingid"),i&&0!==Number(i.get("value"))||t&&0!==Number(t.get("value"))?this.restrictByGroup.set("disabled",!1):this.restrictByGroup.set("disabled",!0)))},addRestrictByGroup:function(i){var t,e;i.preventDefault(),e=(t=c.one("#id_groupingid"))&&0!==Number(t.get("value"))?new M.core_availability.Item({type:"grouping",id:Number(t.get("value"))},!0):new M.core_availability.Item({type:"group"},!0),this.rootList.addChild(e),this.update(),this.rootList.renumber(),this.rootList.updateHtml()}},M.core_availability.plugin={allowAdd:!1,init:function(i,t,e){var a=i.replace(/^availability_/,"");this.allowAdd=t,(M.core_availability.form.plugins[a]=this).initInner.apply(this,e)},initInner:function(){},getNode:function(){throw"getNode not implemented"},fillValue:function(){throw"fillValue not implemented"},fillErrors:function(){},focusAfterAdd:function(i){i.one("input:not([disabled]),select:not([disabled])").focus()}},M.core_availability.List=function(i,t,e){var a,l,n,o,s,r,d;if(this.children=[],t!==undefined&&(this.root=t),this.node=c.Node.create('<div class="availability-list"><h3 class="accesshide"></h3><div class="availability-inner"><div class="availability-header mb-1"><span>'+M.util.get_string("listheader_sign_before","availability")+'</span> <label><span class="accesshide">'+M.util.get_string("label_sign","availability")+' </span><select class="availability-neg custom-select mx-1" title="'+M.util.get_string("label_sign","availability")+'"><option value="">'+M.util.get_string("listheader_sign_pos","availability")+'</option><option value="!">'+M.util.get_string("listheader_sign_neg","availability")+'</option></select></label> <span class="availability-single">'+M.util.get_string("listheader_single","availability")+'</span><span class="availability-multi">'+M.util.get_string("listheader_multi_before","availability")+' <label><span class="accesshide">'+M.util.get_string("label_multi","availability")+' </span><select class="availability-op custom-select mx-1" title="'+M.util.get_string("label_multi","availability")+'"><option value="&">'+M.util.get_string("listheader_multi_and","availability")+'</option><option value="|">'+M.util.get_string("listheader_multi_or","availability")+"</option></select></label> "+M.util.get_string("listheader_multi_after","availability")+'</span></div><div class="availability-children"></div><div class="availability-none"><span class="px-3">'+M.util.get_string("none","moodle")+'</span></div><div class="clearfix mt-1"></div><div class="availability-button"></div></div><div class="clearfix"></div></div>'),t||this.node.addClass("availability-childlist d-sm-flex align-items-center"),this.inner=this.node.one("> .availability-inner"),a=!0,t?(i&&i.show!==undefined&&(a=i.show),this.eyeIcon=new M.core_availability.EyeIcon(!1,a),this.node.one(".availability-header").get("firstChild").insert(this.eyeIcon.span,"before")):e&&(i&&i.showc!==undefined&&(a=i.showc),this.eyeIcon=new M.core_availability.EyeIcon(!1,a),this.inner.insert(this.eyeIcon.span,"before")),t||(l=new M.core_availability.DeleteIcon(this),(n=this.node.one(".availability-none")).appendChild(document.createTextNode(" ")),n.appendChild(l.span),n.appendChild(c.Node.create('<span class="mt-1 badge badge-warning">'+M.util.get_string("invalid","availability")+"</span>"))),(o=c.Node.create('<button type="button" class="btn btn-secondary mt-1">'+M.util.get_string("addrestriction","availability")+"</button>")).on("click",function(){this.clickAdd()},this),this.node.one("div.availability-button").appendChild(o),i){switch(i.op){case"&":case"|":this.node.one(".availability-neg").set("value","");break;case"!&":case"!|":this.node.one(".availability-neg").set("value","!")}switch(i.op){case"&":case"!&":this.node.one(".availability-op").set("value","&");break;case"|":case"!|":this.node.one(".availability-op").set("value","|")}for(s=0;s<i.c.length;s++)r=i.c[s],this.root&&i&&i.showc!==undefined&&(r.showc=i.showc[s]),d=r.type!==undefined?new M.core_availability.Item(r,this.root):new M.core_availability.List(r,!1,this.root),this.addChild(d)}this.node.one(".availability-neg").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.node.one(".availability-op").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.updateHtml()},
 M.core_availability.List.prototype.addChild=function(i){0<this.children.length&&this.inner.one(".availability-children").appendChild(c.Node.create('<div class="availability-connector"><span class="label"></span></div>')),this.children.push(i),this.inner.one(".availability-children").appendChild(i.node)},M.core_availability.List.prototype.focusAfterAdd=function(){this.inner.one("button").focus()},M.core_availability.List.prototype.isIndividualShowIcons=function(){var i,t;if(!this.root)throw"Can only call this on root list";return i="!"===this.node.one(".availability-neg").get("value"),t="|"===this.node.one(".availability-op").get("value"),!i&&!t||i&&t},M.core_availability.List.prototype.renumber=function(i){var t,e,a,l={count:this.children.length};for(t=i===undefined?l.number="":(l.number=i+":",i+"."),e=M.util.get_string("setheading","availability",l),this.node.one("> h3").set("innerHTML",e),a=0;a<this.children.length;a++)this.children[a].renumber(t+(a+1))},M.core_availability.List.prototype.updateHtml=function(){var i,t,e,a;if(0<this.children.length?(this.inner.one("> .availability-children").removeAttribute("aria-hidden"),this.inner.one("> .availability-none").setAttribute("aria-hidden","true"),this.inner.one("> .availability-header").removeAttribute("aria-hidden"),1<this.children.length?(this.inner.one(".availability-single").setAttribute("aria-hidden","true"),this.inner.one(".availability-multi").removeAttribute("aria-hidden")):(this.inner.one(".availability-single").removeAttribute("aria-hidden"),this.inner.one(".availability-multi").setAttribute("aria-hidden","true"))):(this.inner.one("> .availability-children").setAttribute("aria-hidden","true"),this.inner.one("> .availability-none").removeAttribute("aria-hidden"),this.inner.one("> .availability-header").setAttribute("aria-hidden","true")),this.root){for(i=this.isIndividualShowIcons(),t=0;t<this.children.length;t++)e=this.children[t],i?e.eyeIcon.span.removeAttribute("aria-hidden"):e.eyeIcon.span.setAttribute("aria-hidden","true");i?this.eyeIcon.span.setAttribute("aria-hidden","true"):this.eyeIcon.span.removeAttribute("aria-hidden")}a="&"===this.inner.one(".availability-op").get("value")?M.util.get_string("and","availability"):M.util.get_string("or","availability"),this.inner.all("> .availability-children > .availability-connector span.label").each(function(i){i.set("innerHTML",a)})},M.core_availability.List.prototype.deleteDescendant=function(i){var t,e,a;for(t=0;t<this.children.length;t++){if((e=this.children[t])===i)return this.children.splice(t,1),a=e.node,0<this.children.length&&(a.previous(".availability-connector")?a.previous(".availability-connector").remove():a.next(".availability-connector").remove()),this.inner.one("> .availability-children").removeChild(a),M.core_availability.form.update(),this.updateHtml(),this.inner.one("> .availability-button").one("button").focus(),!0;if(e instanceof M.core_availability.List&&e.deleteDescendant(i))return!0}return!1},M.core_availability.List.prototype.clickAdd=function(){var i,t,e,a,l,n,o=c.Node.create('<div><ul class="list-unstyled container-fluid"></ul><div class="availability-buttons mdl-align"><button type="button" class="btn btn-secondary">'+M.util.get_string("cancel","moodle")+"</button></div></div>"),s=o.one("button"),r={dialog:null},d=o.one("ul");for(l in M.core_availability.form.plugins)M.core_availability.form.plugins[l].allowAdd&&(i=c.Node.create('<li class="clearfix row"></li>'),t="availability_addrestriction_"+l,(e=c.Node.create('<div class="col-6"><button type="button" class="btn btn-secondary w-100"id="'+t+'">'+M.util.get_string("title","availability_"+l)+"</button></div>")).on("click",this.getAddHandler(l,r),this),i.appendChild(e),a=c.Node.create('<div class="col-6"><label for="'+t+'">'+M.util.get_string("description","availability_"+l)+"</label></div>"),i.appendChild(a),d.appendChild(i));i=c.Node.create('<li class="clearfix row"></li>'),t="availability_addrestriction_list_",(e=c.Node.create('<div class="col-6"><button type="button" class="btn btn-secondary w-100"id="'+t+'">'+M.util.get_string("condition_group","availability")+"</button></div>")).on("click",this.getAddHandler(null,r),this),i.appendChild(e),a=c.Node.create('<div class="col-6"><label for="'+t+'">'+M.util.get_string("condition_group_info","availability")+"</label></div>"),i.appendChild(a),d.appendChild(i),n={headerContent:M.util.get_string("addrestriction","availability"),bodyContent:o,additionalBaseClass:"availability-dialogue",draggable:!0,modal:!0,closeButton:!1,width:"450px"},r.dialog=new M.core.dialogue(n),r.dialog.show(),s.on("click",function(){r.dialog.destroy(),this.inner.one("> .availability-button").one("button").focus()},this)},M.core_availability.List.prototype.getAddHandler=function(t,e){return function(){var i;i=t?new M.core_availability.Item({type:t,creating:!0},this.root):new M.core_availability.List({c:[],showc:!0},!1,this.root),this.addChild(i),M.core_availability.form.update(),M.core_availability.form.rootList.renumber(),this.updateHtml(),e.dialog.destroy(),i.focusAfterAdd()}},M.core_availability.List.prototype.getValue=function(){var i,t={};for(t.op=this.node.one(".availability-neg").get("value")+this.node.one(".availability-op").get("value"),t.c=[],i=0;i<this.children.length;i++)t.c.push(this.children[i].getValue());if(this.root)if(this.isIndividualShowIcons())for(t.showc=[],i=0;i<this.children.length;i++)t.showc.push(!this.children[i].eyeIcon.isHidden());else t.show=!this.eyeIcon.isHidden();return t},M.core_availability.List.prototype.fillErrors=function(i){0!==this.children.length||this.root||i.push("availability:error_list_nochildren");for(var t=0;t<this.children.length;t++)this.children[t].fillErrors(i)},M.core_availability.List.prototype.hasItemOfType=function(i){var t,e;for(t=0;t<this.children.length;t++)if((e=this.children[t])instanceof M.core_availability.List){if(e.hasItemOfType(i))return!0}else if(e.pluginType===i)return!0;return!1},
-M.core_availability.List.prototype.eyeIcon=null,M.core_availability.List.prototype.root=!1,M.core_availability.List.prototype.children=null,M.core_availability.List.prototype.node=null,M.core_availability.List.prototype.inner=null,M.core_availability.Item=function(i,t){var e,a;this.pluginType=i.type,M.core_availability.form.plugins[i.type]===undefined?(this.plugin=null,this.pluginNode=c.Node.create('<div class="availability-warning">'+M.util.get_string("missingplugin","availability")+"</div>")):(this.plugin=M.core_availability.form.plugins[i.type],this.pluginNode=this.plugin.getNode(i),this.pluginNode.addClass("availability_"+i.type)),this.node=c.Node.create('<div class="availability-item d-sm-flex align-items-center"><h3 class="accesshide"></h3></div>'),t&&(e=!0,i.showc!==undefined&&(e=i.showc),this.eyeIcon=new M.core_availability.EyeIcon(!0,e),this.node.appendChild(this.eyeIcon.span)),this.pluginNode.addClass("availability-plugincontrols"),this.node.appendChild(this.pluginNode),a=new M.core_availability.DeleteIcon(this),this.node.appendChild(a.span),this.node.appendChild(document.createTextNode(" ")),this.node.appendChild(c.Node.create('<span class="badge badge-warning"/>'))},M.core_availability.Item.prototype.getValue=function(){var i={type:this.pluginType};return this.plugin&&this.plugin.fillValue(i,this.pluginNode),i},M.core_availability.Item.prototype.fillErrors=function(i){var t,e=i.length;this.plugin?this.plugin.fillErrors(i,this.pluginNode):i.push("core_availability:item_unknowntype"),t=this.node.one("> .badge-warning"),i.length===e||t.get("firstChild")?i.length===e&&t.get("firstChild")&&t.get("firstChild").remove():t.appendChild(document.createTextNode(M.util.get_string("invalid","availability")))},M.core_availability.Item.prototype.renumber=function(i){var t,e={number:i};this.plugin?e.type=M.util.get_string("title","availability_"+this.pluginType):e.type="["+this.pluginType+"]",e.number=i+":",t=M.util.get_string("itemheading","availability",e),this.node.one("> h3").set("innerHTML",t)},M.core_availability.Item.prototype.focusAfterAdd=function(){this.plugin.focusAfterAdd(this.pluginNode)},M.core_availability.Item.prototype.pluginType=null,M.core_availability.Item.prototype.plugin=null,M.core_availability.Item.prototype.eyeIcon=null,M.core_availability.Item.prototype.node=null,M.core_availability.Item.prototype.pluginNode=null,M.core_availability.EyeIcon=function(i,t){var e,a,l,n,o;this.individual=i,this.span=c.Node.create('<a class="availability-eye col-form-label" href="#" role="button">'),e=c.Node.create("<img />"),this.span.appendChild(e),a=i?"_individual":"_all",l=function(){var i=M.util.get_string("hidden"+a,"availability");e.set("src",M.util.image_url("i/show","core")),e.set("alt",i),this.span.set("title",i+" • "+M.util.get_string("show_verb","availability"))},n=function(){var i=M.util.get_string("shown"+a,"availability");e.set("src",M.util.image_url("i/hide","core")),e.set("alt",i),this.span.set("title",i+" • "+M.util.get_string("hide_verb","availability"))},t?n.call(this):l.call(this),o=function(i){i.preventDefault(),this.isHidden()?n.call(this):l.call(this),M.core_availability.form.update()},this.span.on("click",o,this),this.span.on("key",o,"up:32",this),this.span.on("key",function(i){i.preventDefault()},"down:32",this)},M.core_availability.EyeIcon.prototype.individual=!1,M.core_availability.EyeIcon.prototype.span=null,M.core_availability.EyeIcon.prototype.isHidden=function(){var i=this.individual?"_individual":"_all",t=M.util.get_string("hidden"+i,"availability");return this.span.one("img").get("alt")===t},M.core_availability.DeleteIcon=function(t){var i,e;this.span=c.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="'+M.util.get_string("delete","moodle")+'" role="button">'),i=c.Node.create('<img src="'+M.util.image_url("t/delete","core")+'" alt="'+M.util.get_string("delete","moodle")+'" />'),this.span.appendChild(i),e=function(i){i.preventDefault(),M.core_availability.form.rootList.deleteDescendant(t),M.core_availability.form.rootList.renumber()},this.span.on("click",e,this),this.span.on("key",e,"up:32",this),this.span.on("key",function(i){i.preventDefault()},"down:32",this)},M.core_availability.DeleteIcon.prototype.span=null},"@VERSION@",{requires:["base","node","event","event-delegate","panel","moodle-core-notification-dialogue","json"]});
\ No newline at end of file
+M.core_availability.List.prototype.eyeIcon=null,M.core_availability.List.prototype.root=!1,M.core_availability.List.prototype.children=null,M.core_availability.List.prototype.node=null,M.core_availability.List.prototype.inner=null,M.core_availability.Item=function(i,t){var e,a;this.pluginType=i.type,M.core_availability.form.plugins[i.type]===undefined?(this.plugin=null,this.pluginNode=c.Node.create('<div class="availability-warning">'+M.util.get_string("missingplugin","availability")+"</div>")):(this.plugin=M.core_availability.form.plugins[i.type],this.pluginNode=this.plugin.getNode(i),this.pluginNode.addClass("availability_"+i.type)),this.node=c.Node.create('<div class="availability-item d-sm-flex align-items-center"><h3 class="accesshide"></h3></div>'),t&&(e=!0,i.showc!==undefined&&(e=i.showc),this.eyeIcon=new M.core_availability.EyeIcon(!0,e),this.node.appendChild(this.eyeIcon.span)),this.pluginNode.addClass("availability-plugincontrols"),this.node.appendChild(this.pluginNode),a=new M.core_availability.DeleteIcon(this),this.node.appendChild(a.span),this.node.appendChild(document.createTextNode(" ")),this.node.appendChild(c.Node.create('<span class="badge badge-warning"/>'))},M.core_availability.Item.prototype.getValue=function(){var i={type:this.pluginType};return this.plugin&&this.plugin.fillValue(i,this.pluginNode),i},M.core_availability.Item.prototype.fillErrors=function(i){var t,e=i.length;this.plugin?this.plugin.fillErrors(i,this.pluginNode):i.push("core_availability:item_unknowntype"),t=this.node.one("> .badge-warning"),i.length===e||t.get("firstChild")?i.length===e&&t.get("firstChild")&&t.get("firstChild").remove():t.appendChild(document.createTextNode(M.util.get_string("invalid","availability")))},M.core_availability.Item.prototype.renumber=function(i){var t,e={number:i};this.plugin?e.type=M.util.get_string("title","availability_"+this.pluginType):e.type="["+this.pluginType+"]",e.number=i+":",t=M.util.get_string("itemheading","availability",e),this.node.one("> h3").set("innerHTML",t)},M.core_availability.Item.prototype.focusAfterAdd=function(){this.plugin.focusAfterAdd(this.pluginNode)},M.core_availability.Item.prototype.pluginType=null,M.core_availability.Item.prototype.plugin=null,M.core_availability.Item.prototype.eyeIcon=null,M.core_availability.Item.prototype.node=null,M.core_availability.Item.prototype.pluginNode=null,M.core_availability.EyeIcon=function(i,t){var e,a,l,n,o;this.individual=i,this.span=c.Node.create('<a class="availability-eye col-form-label" href="#" role="button">'),e=c.Node.create("<img />"),this.span.appendChild(e),a=i?"_individual":"_all",l=function(){var i=M.util.get_string("hidden"+a,"availability");e.set("src",M.util.image_url("i/show","core")),e.set("alt",i),this.span.set("title",i+" • "+M.util.get_string("show_verb","availability"))},n=function(){var i=M.util.get_string("shown"+a,"availability");e.set("src",M.util.image_url("i/hide","core")),e.set("alt",i),this.span.set("title",i+" • "+M.util.get_string("hide_verb","availability"))},t?n.call(this):l.call(this),o=function(i){i.preventDefault(),this.isHidden()?n.call(this):l.call(this),M.core_availability.form.update()},this.span.on("click",o,this),this.span.on("key",o,"up:32",this),this.span.on("key",function(i){i.preventDefault()},"down:32",this)},M.core_availability.EyeIcon.prototype.individual=!1,M.core_availability.EyeIcon.prototype.span=null,M.core_availability.EyeIcon.prototype.isHidden=function(){var i=this.individual?"_individual":"_all",t=M.util.get_string("hidden"+i,"availability");return this.span.one("img").get("alt")===t},M.core_availability.DeleteIcon=function(t){var i,e;this.span=c.Node.create('<a class="d-inline-block col-form-label availability-delete px-3" href="#" title="'+M.util.get_string("delete","moodle")+'" role="button">'),i=c.Node.create('<img src="'+M.util.image_url("t/delete","core")+'" alt="'+M.util.get_string("delete","moodle")+'" />'),this.span.appendChild(i),e=function(i){i.preventDefault(),M.core_availability.form.rootList.deleteDescendant(t),M.core_availability.form.rootList.renumber()},this.span.on("click",e,this),this.span.on("key",e,"up:32",this),this.span.on("key",function(i){i.preventDefault()},"down:32",this)},M.core_availability.DeleteIcon.prototype.span=null},"@VERSION@",{requires:["base","node","event","event-delegate","panel","moodle-core-notification-dialogue","json"]});
\ No newline at end of file
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
index a98f863a68a..9b61ed9b3e3 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
@@ -374,7 +374,7 @@ M.core_availability.List = function(json, root, parentRoot) {
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="availability-none"><span class="px-3">' + M.util.get_string('none', 'moodle') + '</span></div>' +
             '<div class="clearfix mt-1"></div>' +
             '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
@@ -1132,7 +1132,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete px-3" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/availability/yui/src/form/js/form.js b/availability/yui/src/form/js/form.js
index 9083daeb77c..93a12d9fadc 100644
--- a/availability/yui/src/form/js/form.js
+++ b/availability/yui/src/form/js/form.js
@@ -372,7 +372,7 @@ M.core_availability.List = function(json, root, parentRoot) {
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="availability-none"><span class="px-3">' + M.util.get_string('none', 'moodle') + '</span></div>' +
             '<div class="clearfix mt-1"></div>' +
             '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
@@ -1130,7 +1130,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete px-3" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/badges/renderer.php b/badges/renderer.php
index f268bd7dafe..28a182bed4e 100644
--- a/badges/renderer.php
+++ b/badges/renderer.php
@@ -626,7 +626,7 @@ class core_badges_renderer extends plugin_renderer_base {
                     get_string('downloadall'), 'POST', array('class' => 'activatebadge'));
         $downloadall = $this->output->box('', 'col-md-3');
         $downloadall .= $this->output->box($actionhtml, 'col-md-9');
-        $downloadall = $this->output->box($downloadall, 'row m-l-2');
+        $downloadall = $this->output->box($downloadall, 'row ml-5');
 
         // Local badges.
         $localhtml = html_writer::start_tag('div', array('id' => 'issued-badge-table', 'class' => 'generalbox'));
@@ -674,7 +674,7 @@ class core_badges_renderer extends plugin_renderer_base {
             $backpacksettings = html_writer::link(new moodle_url('/badges/mybackpack.php'), $label, $attr);
             $actionshtml = $this->output->box('', 'col-md-3');
             $actionshtml .= $this->output->box($backpacksettings, 'col-md-9');
-            $actionshtml = $this->output->box($actionshtml, 'row m-l-2');
+            $actionshtml = $this->output->box($actionshtml, 'row ml-5');
             $externalhtml .= $actionshtml;
         }
 
diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache
index f32e7e8c4cf..06a35f6a685 100644
--- a/blocks/myoverview/templates/view-list.mustache
+++ b/blocks/myoverview/templates/view-list.mustache
@@ -41,7 +41,7 @@
     <li class="list-group-item course-listitem"
         data-region="course-content"
         data-course-id="{{{id}}}">
-        <div class="row-fluid">
+        <div class="row">
             <div class="{{#hasprogress}}col-md-6{{/hasprogress}}{{^hasprogress}}col-md-11 col-md-11{{/hasprogress}} d-flex align-items-center">
                 <div>
                     <div class="text-muted muted d-flex flex-wrap">
@@ -72,7 +72,7 @@
                     </a>
                     {{^visible}}
                         <div class="d-flex flex-wrap">
-                            <span class="tag tag-info">{{#str}} hiddenfromstudents {{/str}}</span>
+                            <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
                         </div>
                     {{/visible}}
                 </div>
diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
index 02dd28428b4..aecd376dbf5 100644
--- a/blocks/myoverview/templates/view-summary.mustache
+++ b/blocks/myoverview/templates/view-summary.mustache
@@ -84,14 +84,14 @@
                 </div>
                 {{^visible}}
                     <div class="d-flex flex-wrap">
-                        <span class="tag tag-info">{{#str}} hiddenfromstudents {{/str}}</span>
+                        <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
                     </div>
                 {{/visible}}
                 <div class="summary">
                     <span class="sr-only">{{#str}}aria:coursesummary, block_myoverview{{/str}}</span>
                     {{{summary}}}
                 </div>
-                <div class="ml-auto mt-auto w-50 p-t-1">
+                <div class="ml-auto mt-auto w-50 pt-3">
                     {{#hasprogress}}
                         {{> block_myoverview/progress-bar}}
                     {{/hasprogress}}
diff --git a/blocks/rss_client/templates/item.mustache b/blocks/rss_client/templates/item.mustache
index 067f8ebbd42..cb0555a056a 100644
--- a/blocks/rss_client/templates/item.mustache
+++ b/blocks/rss_client/templates/item.mustache
@@ -43,7 +43,7 @@
         "datepublished": "12 January 2016, 9:12 pm"
     }
 }}
-<li class="p-y-1">
+<li class="py-3">
     {{$title}}
         <div class="link">
             <a href="{{{link}}}" onclick='this.target="_blank"'>{{title}}</a>
diff --git a/calendar/templates/event_item.mustache b/calendar/templates/event_item.mustache
index 6f307907779..3920e03c334 100644
--- a/calendar/templates/event_item.mustache
+++ b/calendar/templates/event_item.mustache
@@ -51,7 +51,7 @@
     }} data-type="event"{{!
     }} data-course-id="{{course.id}}"{{!
     }} data-event-id="{{id}}"{{!
-    }} class="event m-t-1"{{!
+    }} class="event mt-3"{{!
     }} data-event-component="{{component}}"{{!
     }} data-event-eventtype="{{eventtype}}"{{!
     }} data-eventtype-{{normalisedeventtype}}="1"{{!
diff --git a/course/templates/activityinstance.mustache b/course/templates/activityinstance.mustache
index 3b51f670335..64232e28462 100644
--- a/course/templates/activityinstance.mustache
+++ b/course/templates/activityinstance.mustache
@@ -33,7 +33,7 @@
     }
 }}
 {{#activities}}
-<div class="row mb-1 row-fluid">
+<div class="row mb-1">
     <div class="activityinstance col-6">
         <div class="mod-indent-outer"></div>
         <div>
@@ -48,7 +48,7 @@
         </div>
     </div>
     <div class="activity-completionstatus col-6" id="completionstatus_{{cmid}}">
-        <div class="col-sm-1  p-l-0">
+        <div class="col-sm-1  pl-0">
             {{#completionstatus.icon}}
                 {{{completionstatus.icon}}}
             {{/completionstatus.icon}}
@@ -56,7 +56,7 @@
                 <span class="mr-3"></span>
             {{/completionstatus.icon}}
         </div>
-        <div class="col-sm-11  p-l-0">
+        <div class="col-sm-11  pl-0">
             <span class="text-muted muted">{{{completionstatus.string}}}</span>
         </div>
     </div>
diff --git a/course/templates/bulkactivitycompletion.mustache b/course/templates/bulkactivitycompletion.mustache
index 4a2802617bf..8043be96808 100644
--- a/course/templates/bulkactivitycompletion.mustache
+++ b/course/templates/bulkactivitycompletion.mustache
@@ -62,7 +62,7 @@
     <div class="topics">
         {{#sections}}
                 <div class="mb-1">
-                    <div class="row mb-1 row-fluid">
+                    <div class="row mb-1">
                         <div class="col-sm-12">
                             <input type="checkbox" data-section-master="{{sectionnumber}}" class="mr-1" aria-label="{{#str}}checkallsection, completion, {{{name}}}{{/str}}">
                             <h3 class="d-inline-block">{{{name}}}</h3>
diff --git a/course/templates/coursecard.mustache b/course/templates/coursecard.mustache
index b24636c88db..5e6c7fbbd3b 100644
--- a/course/templates/coursecard.mustache
+++ b/course/templates/coursecard.mustache
@@ -66,7 +66,7 @@
                 </a>
                 {{^visible}}
                     <div class="d-flex flex-wrap">
-                        <span class="tag tag-info">{{#str}} hiddenfromstudents {{/str}}</span>
+                        <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
                     </div>
                 {{/visible}}
             </div>
diff --git a/course/templates/defaultactivitycompletion.mustache b/course/templates/defaultactivitycompletion.mustache
index dd2b39f5194..f76da9f428e 100644
--- a/course/templates/defaultactivitycompletion.mustache
+++ b/course/templates/defaultactivitycompletion.mustache
@@ -60,7 +60,7 @@
         {{#modules}}
             {{#canmanage}}
              <div class="mb-1">
-                <div class="row mb-1 row-fluid">
+                <div class="row mb-1">
                     <div class="col-6">
                         <label class="accesshide" for="modtype_{{id}}">{{#str}}select, core_completion{{/str}} {{formattedname}}</label>
                         <input id="modtype_{{id}}" type="checkbox" class="mr-1" name="modids[]" value="{{id}}" aria-label="{{#str}}checkactivity, completion, {{{formattedname}}}{{/str}}">
@@ -68,7 +68,7 @@
                         <span>{{{formattedname}}}</span>
                     </div>
                     <div class="activity-completionstatus col-6">
-                        <div class="col-sm-1 p-l-0">
+                        <div class="col-sm-1 pl-0">
                             {{#completionstatus.icon}}
                                 {{{completionstatus.icon}}}
                             {{/completionstatus.icon}}
@@ -76,7 +76,7 @@
                                 <span class="mr-3"></span>
                             {{/completionstatus.icon}}
                         </div>
-                        <div class="col-sm-11 p-l-0">
+                        <div class="col-sm-11 pl-0">
                             <span class="text-muted muted">{{{completionstatus.string}}}</span>
                         </div>
                     </div>
@@ -127,4 +127,4 @@ require([
         }
     });
 });
-{{/js}}
\ No newline at end of file
+{{/js}}
diff --git a/grade/edit/outcome/course_form.html b/grade/edit/outcome/course_form.html
index 082cef6eeab..312eef2e050 100644
--- a/grade/edit/outcome/course_form.html
+++ b/grade/edit/outcome/course_form.html
@@ -36,12 +36,12 @@
         <?php
         if (has_capability('moodle/grade:manageoutcomes', $context)) {
         ?>
-        <td class="p-l-1 p-r-1">
-            <div class="m-y-1">
+        <td class="pl-3 pr-3">
+            <div class="my-3">
                 <input name="add" class="btn btn-secondary" id="add" type="submit" value="<?php echo $OUTPUT->larrow() . ' ' .
                     get_string('add'); ?>" title="<?php print_string('add'); ?>" />
             </div>
-            <div class="m-y-1">
+            <div class="my-3">
                 <input name="remove" class="btn btn-secondary" id="remove" type="submit" value="<?php echo get_string('remove') .
                     ' ' . $OUTPUT->rarrow(); ?>" title="<?php print_string('remove'); ?>" />
             </div>
diff --git a/group/templates/index.mustache b/group/templates/index.mustache
index e4914ff935c..30e6d92f380 100644
--- a/group/templates/index.mustache
+++ b/group/templates/index.mustache
@@ -77,7 +77,7 @@
 }}
 <form id="groupeditform" action="index.php" method="post">
     <div class="container-fluid groupmanagementtable">
-        <div class="row row-fluid rtl-compatible">
+        <div class="row rtl-compatible">
             <div class="col-md-6 mb-1">
                 <input type="hidden" name="id" value="{{courseid}}">
                 <div class="form-group">
diff --git a/lib/badgeslib.php b/lib/badgeslib.php
index 352a086f0c5..78228c05162 100644
--- a/lib/badgeslib.php
+++ b/lib/badgeslib.php
@@ -1232,7 +1232,7 @@ function badges_verify_backpack(int $backpackid) {
 
             $message = get_string('sitebackpackwarning', 'badges', ['url' => $backpackurl, 'warning' => $warning]);
             $icon = $OUTPUT->pix_icon('i/warning', get_string('warning', 'moodle'));
-            return $OUTPUT->container($icon . $message, 'text-error');
+            return $OUTPUT->container($icon . $message, 'text-danger');
         }
     }
 
diff --git a/lib/editor/atto/plugins/image/styles.css b/lib/editor/atto/plugins/image/styles.css
index 8656f0e261f..a93deb07824 100644
--- a/lib/editor/atto/plugins/image/styles.css
+++ b/lib/editor/atto/plugins/image/styles.css
@@ -30,9 +30,9 @@
     margin: 0 0.5em;
 }
 
-.atto_image_button_text-top.img-responsive,
-.atto_image_button_middle.img-responsive,
-.atto_image_button_text-bottom.img-responsive {
+.atto_image_button_text-top.img-fluid,
+.atto_image_button_middle.img-fluid,
+.atto_image_button_text-bottom.img-fluid {
     /* If the image is display: block then linking the image to URLs won't work. */
     display: inline-block;
     max-width: calc(100% - 1em);
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
index e4465fd7b69..606e57feb43 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
@@ -43,14 +43,14 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '</div><div class="col-sm-8">' +
             '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
@@ -62,7 +62,7 @@ var COMPONENT = 'atto_table',
             '</select>' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
             '</div><div class="col-sm-8">' +
@@ -74,7 +74,7 @@ var COMPONENT = 'atto_table',
             '</div>' +
             '</div>' +
             '{{#if nonedit}}' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
                 '</div><div class="col-sm-8">' +
@@ -82,7 +82,7 @@ var COMPONENT = 'atto_table',
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
                 '</div>' +
                 '</div>' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
                 '>{{get_string "numberofcolumns" component}}</label>' +
@@ -97,7 +97,7 @@ var COMPONENT = 'atto_table',
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
                     '</div><div class="col-sm-8">' +
@@ -108,7 +108,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
@@ -121,7 +121,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
@@ -134,7 +134,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
@@ -161,7 +161,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
@@ -189,7 +189,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
index 8c75af17dbf..4520cacef2e 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
@@ -1,5 +1,5 @@
 YUI.add("moodle-atto_table-button",function(O,e){var C="atto_table",S="none",R="1",T="480px",l={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form",BORDERS:"borders",BORDERSIZE:"bordersize",BORDERSIZEUNIT:"px",BORDERCOLOUR:"bordercolour",BORDERSTYLE:"borderstyle",BACKGROUNDCOLOUR:"backgroundcolour",WIDTH:"customwidth",WIDTHUNIT:"%",AVAILABLECOLORS:"availablecolors",COLOURROW:"colourrow"},w={CAPTION:"."+l.CAPTION,CAPTIONPOSITION:"."+l.CAPTIONPOSITION,HEADERS:"."+l.HEADERS,ROWS:"."+l.ROWS,COLUMNS:"."+l.COLUMNS,SUBMIT:"."+l.SUBMIT,BORDERS:"."+l.BORDERS,BORDERSIZE:"."+l.BORDERSIZE,BORDERCOLOURS:"."+l.BORDERCOLOUR+' input[name="borderColour"]',SELECTEDBORDERCOLOUR:"."+l.BORDERCOLOUR+' input[name="borderColour"]:checked',BORDERSTYLE:"."+l.BORDERSTYLE,BACKGROUNDCOLOURS:"."+l.BACKGROUNDCOLOUR+' input[name="backgroundColour"]',SELECTEDBACKGROUNDCOLOUR:"."+l.BACKGROUNDCOLOUR+' input[name="backgroundColour"]:checked',FORM:".atto_form",WIDTH:"."+l.WIDTH,AVAILABLECOLORS:"."+l.AVAILABLECOLORS};O.namespace("M.atto_table").Button=O.Base.create("button",O.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"}),O.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection(),!1===this._currentSelection||this._currentSelection.collapsed||(this.getDialogue({headerContent:M.util.get_string("createtable",C),focusAfterHide:!0,focusOnShowSelector:w.CAPTION,width:T}).set("bodyContent",this._getDialogueContent(!1)).show(),this._updateAvailableSettings())},_displayTableEditor:function(e){var t=this._getSuitableTableCell();return t?(e.tableCell=t,this._showTableMenu(e)):this._displayDialogue(e)},_stopAtContentEditableFilter:function(e){return this.editor.contains(e)},_getDialogueContent:function(e){var t=O.Handlebars.compile(
-'<form class="{{CSS.FORM}}"><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label></div><div class="col-sm-8"><input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required /></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_captionposition">{{get_string "captionposition" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select></div></div>{{#if nonedit}}<div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_columns" >{{get_string "numberofcolumns" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/></div></div>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label></div><div class="col-sm-8"><select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borderstyle">{{get_string "borderstyles" component}}</label></div><div class="col-sm-8"><select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordersize">{{get_string "bordersize" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label>{{CSS.BORDERSIZEUNIT}}</label></div></div></div><div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordercolour">{{get_string "bordercolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_bordercolour"class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebordercolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" class="m-0" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" class="m-0" name="borderColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowBackgroundColour}}<div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_backgroundcolour">{{get_string "backgroundcolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_backgroundcolour"class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebackgroundcolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" class="m-0" name="backgroundColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowWidth}}<div class="mb-1 form-group row-fluid"><div class="col-sm-4"><label for="{{elementid}}_atto_table_width">{{get_string "width" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="width" id="{{elementid}}_atto_table_width" class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label>{{CSS.WIDTHUNIT}}</label></div></div></div>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="btn btn-secondary submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="btn btn-secondary submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>'
+'<form class="{{CSS.FORM}}"><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label></div><div class="col-sm-8"><input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required /></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_captionposition">{{get_string "captionposition" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select></div></div>{{#if nonedit}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_columns" >{{get_string "numberofcolumns" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/></div></div>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label></div><div class="col-sm-8"><select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borderstyle">{{get_string "borderstyles" component}}</label></div><div class="col-sm-8"><select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordersize">{{get_string "bordersize" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label>{{CSS.BORDERSIZEUNIT}}</label></div></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordercolour">{{get_string "bordercolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_bordercolour"class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebordercolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" class="m-0" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" class="m-0" name="borderColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowBackgroundColour}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_backgroundcolour">{{get_string "backgroundcolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_backgroundcolour"class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebackgroundcolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" class="m-0" name="backgroundColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowWidth}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_width">{{get_string "width" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="width" id="{{elementid}}_atto_table_width" class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label>{{CSS.WIDTHUNIT}}</label></div></div></div>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="btn btn-secondary submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="btn btn-secondary submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>'
 ),o=this.get("allowBorders");return this._content=O.Node.create(t({CSS:l,elementid:this.get("host").get("elementid"),component:C,edit:e,nonedit:!e,allowStyling:this.get("allowStyling"),allowBorders:o,borderStyles:this.get("borderStyles"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:this.get("availableColors"),allowWidth:this.get("allowWidth")})),e?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),o&&this._content.one('[name="borders"]').on("change",this._updateAvailableSettings,this),this._content},_updateAvailableSettings:function(){var e=this._content,t=e.one('[name="borders"]'),o=e.one('[name="borderstyles"]'),a=e.one('[name="bordersize"]'),n=e.all('[name="borderColour"]'),r="removeAttribute";t&&("default"===t.get("value")&&(r="setAttribute"),o&&o[r]("disabled"),a&&a[r]("disabled"),n&&n[r]("disabled"))},_getSuitableTableCell:function(){var e,a=null,t=this.get("host"),n=O.bind(this._stopAtContentEditableFilter,this);return t.getSelectedNodes().some(function(e){var t,o;if(e.ancestor("td, th, caption",!0,n))return(t=(a=e).ancestor("caption",!0,n))&&(o=t.get("parentNode"))&&(a=o.one("td, th")),!0}),a&&(e=t.getSelectionFromNode(a),t.setSelection(e)),a},_changeNodeType:function(e,t){var o=O.Node.create("<"+t+"></"+t+">");return o.setAttrs(e.getAttrs()),e.get("childNodes").each(function(e){o.append(e.remove())}),e.replace(o),o},_updateTable:function(e){var t,o,a,n,r,l,i,s,d,c,u,g;e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(w.FORM).one(w.CAPTION),o=e.currentTarget.ancestor(w.FORM).one(w.CAPTIONPOSITION),a=e.currentTarget.ancestor(w.FORM).one(w.HEADERS),n=e.currentTarget.ancestor(w.FORM).one(w.BORDERS),r=e.currentTarget.ancestor(w.FORM).one(w.BORDERSIZE),i=e.currentTarget.ancestor(w.FORM).one(w.SELECTEDBORDERCOLOUR),l=e.currentTarget.ancestor(w.FORM).one(w.BORDERSTYLE),s=e.currentTarget.ancestor(w.FORM).one(w.SELECTEDBACKGROUNDCOLOUR),c=e.currentTarget.ancestor(w.FORM).one(w.WIDTH),d=this._lastTarget.ancestor("table"),this._setAppearance(d,{width:c,borders:n,borderColour:i,borderSize:r,borderStyle:l,backgroundColour:s}),(u=d.one("caption"))||(u=O.Node.create("<caption></caption>"),d.insert(u,0)),u.setHTML(t.get("value")),u.setStyle("caption-side",o.get("value")),u.getAttribute("style")||u.removeAttribute("style"),"rows"!==a.get("value")&&"both"!==a.get("value")||d.all("tr").each(function(e){var t=e.all("th, td"),o=t.shift();"TD"===o.get("tagName")?this._changeNodeType(o,"th").setAttribute("scope","row"):o.setAttribute("scope","row"),t.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this),"columns"!==a.get("value")&&"both"!==a.get("value")||((g=d.all("tr")).shift().all("td, th").each(function(e){"TD"===e.get("tagName")?this._changeNodeType(e,"th").setAttribute("scope","col"):e.setAttribute("scope","col")},this),g.each(function(e){var t=e.all("th, td");"both"===a.get("value")&&t.shift(),t.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this)),this.markUpdated()},_setTable:function(e){var t,o,a,n,r,l,i,s,d,c,u,g,h,b,m,_,v,p;if(e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(w.FORM).one(w.CAPTION),o=e.currentTarget.ancestor(w.FORM).one(w.CAPTIONPOSITION),a=e.currentTarget.ancestor(w.FORM).one(w.BORDERS),n=e.currentTarget.ancestor(w.FORM).one(w.BORDERSIZE),l=e.currentTarget.ancestor(w.FORM).one(w.SELECTEDBORDERCOLOUR),r=e.currentTarget.ancestor(w.FORM).one(w.BORDERSTYLE),u=e.currentTarget.ancestor(w.FORM).one(w.SELECTEDBACKGROUNDCOLOUR),i=e.currentTarget.ancestor(w.FORM).one(w.ROWS),s=e.currentTarget.ancestor(w.FORM).one(w.COLUMNS),d=e.currentTarget.ancestor(w.FORM).one(w.HEADERS),g=e.currentTarget.ancestor(w.FORM).one(w.WIDTH),this.get("host").setSelection(this._currentSelection),c="<br/>"+(m="\n")+'<table id="'+(_=O.guid())+'">'+m,v="",o.get("value")&&(v=' style="caption-side: '+o.get("value")+'"'),c+="<caption"+v+">"+O.Escape.html(t.get("value"))+"</caption>"+m,h=0,"columns"===d.get("value")||"both"===d.get("value")){for(h=1,c+="<thead>"+m+"<tr>"+m,b=0;b<parseInt(s.get("value"),10);b++)c+='<th scope="col"></th>'+m;c+="</tr>"+m+"</thead>"+m}for(c+="<tbody>"+m;h<parseInt(i.get("value"),10);h++){for(c+="<tr>"+m,b=0;b<parseInt(s.get("value"),10);b++)0!==b||"rows"!==d.get("value")&&"both"!==d.get("value")?c+="<td ></td>"+m:c+='<th scope="row"></th>'+m;c+="</tr>"+m}c+="</tbody>"+m,c+="</table>"+m+"<br/>",this.get("host").insertContentAtFocusPoint(c),p=O.one("#"+_),this._setAppearance(p,{width:g,borders:a,borderColour:l,borderSize:n,borderStyle:r,backgroundColour:u}),p.removeAttribute("id"),this.markUpdated()},_findColumnCells:function(){var r=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),l=new O.NodeList,i=new O.NodeList,s=new O.NodeList;return e.each(function(e){var t=e.all("td, th"),o=t.item(r),a=t.item(r-1),n=t.item(r+1);l.push(o),a&&i.push(a),n&&s.push(n)}),{current:l,prev:i,next:s}},_hideInvalidEntries:function(e){var t,o,a,n,r=this._lastTarget.ancestor("table"),l=this._lastTarget.ancestor("tr"),i=r.all("tr"),s=i.indexOf(l),d=i.item(s-1),c=d?d.one("td"):null;l&&c?e.one('[data-change="moverowup"]').show():e.one('[data-change="moverowup"]').hide(),t=i.item(s+1),o=!!l&&l.one("td"),l&&t&&o?e.one('[data-change="moverowdown"]').show():e.one('[data-change="moverowdown"]').hide(),0<(a=this._findColumnCells()).prev.filter("td").size()?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide(),n=0<a.current.filter("td").size(),0<a.next.size()&&n?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),0<a.current.filter("td").size()?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),l&&l.one("td")?e.one('[data-change="deleterow"]').show():e.one(
 '[data-change="deleterow"]').hide()},_showTableMenu:function(e){var t,o;e.preventDefault(),this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",C),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",C),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",C),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",C),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",C),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",C),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",C),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",C),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",C),data:{change:"edittable"}}],this._contextMenu=new O.M.editor_atto.Menu({items:this._menuOptions}),(t=this._contextMenu.get("boundingBox")).delegate("click",this._handleTableChange,"a",this)),t=this._contextMenu.get("boundingBox"),this._lastTarget=e.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(t),O.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)}),o=this.buttons[this.name],this.get("host")._setTabFocus(o),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[O.WidgetPositionAlign.TL,O.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",o),t.one("a")&&t.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){switch(e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e),e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),o=e.ancestor("tr");if(t&&o)return t.all("tr").indexOf(o)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(t)return t.all("td, th").indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");e&&t&&(e.swap(t),this.markUpdated())},_moveColumnLeft:function(){var e,t,o,a=this._findColumnCells();if(0<a.current.size()&&0<a.prev.size()&&a.current.size()===a.prev.size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.prev.item(e),t.swap(o);this.markUpdated()},_addCaption:function(){var e=this._lastTarget.ancestor("table");e.one("caption")||e.insert(O.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table").one("caption");e&&e.remove(!0)},_moveColumnRight:function(){var e,t,o,a=this._findColumnCells();if(0<a.next.size()&&a.current.size()===a.next.size()&&0<a.current.filter("td").size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.next.item(e),t.swap(o);this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");e&&t&&e.one("td")&&(e.swap(t),this.markUpdated())},_getBorderConfiguration:function(e){var t,o,a=e.cloneNode(!0),n=a.getStyle("borderStyle"),r=a.getStyle("borderColor"),l=a.getStyle("borderWidth");return!!(n||r||l)&&(t=O.Color.toHex(r),o=parseInt(l,10),{borderStyle:n,borderColor:"#"===t?null:t,borderWidth:isNaN(o)?null:o})},_setAppearance:function(e,t){var o,a,n,r;t.borderColour&&(o=t.borderColour.get("value")),t.borderSize&&(a=t.borderSize.get("value")),t.borderStyle&&(n=t.borderStyle.get("value")),t.backgroundColour&&(r=t.backgroundColour.get("value")),e.removeAttribute("style"),e.all("td, th").each(function(e){e.removeAttribute("style")},this),t.borders&&("outer"===t.borders.get("value")?(e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)):"all"===t.borders.get("value")&&e.all("td, th").each(function(e){e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)},this)),"none"!==r&&e.setStyle("backgroundColor",r),t.width&&t.width.get("value")&&e.setStyle("width",t.width.get("value")+l.WIDTHUNIT)},_editTable:function(){var e,t,o,a,n,r,l,i=this.getDialogue({headerContent:M.util.get_string("edittable",C),focusAfterHide:!1,focusOnShowSelector:w.CAPTION,width:T}),s=this._getDialogueContent(!0),d=s.one(w.CAPTION),c=s.one(w.CAPTIONPOSITION),u=s.one(w.HEADERS),g=s.one(w.BORDERS),h=s.one(w.BORDERSTYLE),b=s.all(w.BORDERCOLOURS),m=s.one(w.BORDERSIZE),_=s.all(w.BACKGROUNDCOLOURS),v=s.one(w.WIDTH),p=this._lastTarget.ancestor("table"),f=p.one("caption");f?d.set("value",f.getHTML()):d.set("value",""),v&&-1===p.getStyle("width").indexOf("px")&&v.set("value",parseInt(p.getStyle("width"),10)),c&&f&&f.getAttribute("style")?c.set("value",f.getStyle("caption-side")):c.set("value",""),p.getStyle("backgroundColor")&&this.get("allowBackgroundColour")&&(e=O.Color.toHex(p.getStyle("backgroundColor")),(t=_.filter('[value="'+e+'"]'))&&t.set("checked",!0)),this.get("allowBorders")&&(o="default",(a=this._getBorderConfiguration(p))?o="outer":(a=this._getBorderConfiguration(p.one("td")))&&(o="all"),a&&(n=a.borderStyle||S,r=a.borderWidth||R,h.set("value",n),m.set("value",r),g.set("value",o),e=a.borderColor,(t=b.filter('[value="'+e+'"]'))&&t.set("checked",!0))),l="columns",p.one('th[scope="row"]')&&(l="rows",p.one('th[scope="col"]')&&(l="both")),u.set("value",l),i.set("bodyContent",s).show(),this._updateAvailableSettings()},_deleteColumn:function(){var a=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),n=new O.NodeList,r=!1;e.each(function(e){var t=e.all("td, th"),o=t.item(a);"TD"===o.get("tagName")&&(r=!0),n.push(o)}),r&&n.remove(!0),this.markUpdated(
 )},_addRowAfter:function(){var e,t,o=this._lastTarget.ancestor("tr"),a=this._lastTarget.ancestor("table").one("tbody");(e=(e=(a=a||this._lastTarget.ancestor("table")).one("tr"))||this._lastTarget.ancestor("table").one("tr"))&&((t=e.cloneNode(!0)).all("th, td").each(function(e){if("TH"===e.get("tagName")&&"row"!==e.getAttribute("scope")){var t=O.Node.create("<td></td>");e.replace(t),e=t}e.setHTML("&nbsp;")}),o.ancestor("thead")?(o=e,a.insert(t,o)):o.insert(t,"after"),this.markUpdated())},_addColumnAfter:function(){var e=this._findColumnCells(),o=!0,t=e.next;e.next.size()<=0&&(o=!1,t=e.current),O.each(t,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),o?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}},{ATTRS:{allowBorders:{value:!0},borderStyles:{value:["none","solid","dashed","dotted"]},allowBackgroundColour:{value:!0},allowWidth:{value:!0},allowStyling:{readOnly:!0,getter:function(){return this.get("allowBorders")||this.get("allowBackgroundColour")||this.get("allowWidth")}},availableColors:{value:["#FFFFFF","#EF4540","#FFCF35","#98CA3E","#7D9FD3","#333333"],readOnly:!0}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
index e4465fd7b69..606e57feb43 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
@@ -43,14 +43,14 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '</div><div class="col-sm-8">' +
             '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
@@ -62,7 +62,7 @@ var COMPONENT = 'atto_table',
             '</select>' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
             '</div><div class="col-sm-8">' +
@@ -74,7 +74,7 @@ var COMPONENT = 'atto_table',
             '</div>' +
             '</div>' +
             '{{#if nonedit}}' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
                 '</div><div class="col-sm-8">' +
@@ -82,7 +82,7 @@ var COMPONENT = 'atto_table',
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
                 '</div>' +
                 '</div>' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
                 '>{{get_string "numberofcolumns" component}}</label>' +
@@ -97,7 +97,7 @@ var COMPONENT = 'atto_table',
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
                     '</div><div class="col-sm-8">' +
@@ -108,7 +108,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
@@ -121,7 +121,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
@@ -134,7 +134,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
@@ -161,7 +161,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
@@ -189,7 +189,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
diff --git a/lib/editor/atto/plugins/table/yui/src/button/js/button.js b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
index 884e6bc76b8..3b2d4d19a80 100644
--- a/lib/editor/atto/plugins/table/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
@@ -41,14 +41,14 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '</div><div class="col-sm-8">' +
             '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
@@ -60,7 +60,7 @@ var COMPONENT = 'atto_table',
             '</select>' +
             '</div>' +
             '</div>' +
-            '<div class="mb-1 form-group row-fluid">' +
+            '<div class="mb-1 form-group row">' +
             '<div class="col-sm-4">' +
             '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
             '</div><div class="col-sm-8">' +
@@ -72,7 +72,7 @@ var COMPONENT = 'atto_table',
             '</div>' +
             '</div>' +
             '{{#if nonedit}}' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
                 '</div><div class="col-sm-8">' +
@@ -80,7 +80,7 @@ var COMPONENT = 'atto_table',
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
                 '</div>' +
                 '</div>' +
-                '<div class="mb-1 form-group row-fluid">' +
+                '<div class="mb-1 form-group row">' +
                 '<div class="col-sm-4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
                 '>{{get_string "numberofcolumns" component}}</label>' +
@@ -95,7 +95,7 @@ var COMPONENT = 'atto_table',
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
                     '</div><div class="col-sm-8">' +
@@ -106,7 +106,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
@@ -119,7 +119,7 @@ var COMPONENT = 'atto_table',
                     '</select>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
@@ -132,7 +132,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                     '</div>' +
                     '</div>' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
@@ -159,7 +159,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
@@ -187,7 +187,7 @@ var COMPONENT = 'atto_table',
                     '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<div class="mb-1 form-group row-fluid">' +
+                    '<div class="mb-1 form-group row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js
index 5fe7586e5cc..e766d16e712 100644
--- a/lib/form/filemanager.js
+++ b/lib/form/filemanager.js
@@ -813,7 +813,7 @@ M.form_filemanager.init = function(Y, options) {
                         var message = '';
                         var confirmmsg = M.util.get_string('confirmrenamefile', 'repository', fileinfo.refcount);
                         dialog_options.message = message.concat('<p>', confirmmsg, '</p>',
-                            '<ul class="p-x-2">', warnings, '</ul>');
+                            '<ul class="px-5">', warnings, '</ul>');
                         this.show_confirm_dialog(dialog_options);
                         return;
                     }
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index c8133629743..74e7c807777 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -788,7 +788,7 @@ class core_renderer extends renderer_base {
             $timeleft = $CFG->maintenance_later - time();
             // If timeleft less than 30 sec, set the class on block to error to highlight.
             $errorclass = ($timeleft < 30) ? 'alert-error alert-danger' : 'alert-warning';
-            $output .= $this->box_start($errorclass . ' moodle-has-zindex maintenancewarning m-a-1 alert');
+            $output .= $this->box_start($errorclass . ' moodle-has-zindex maintenancewarning m-3 alert');
             $a = new stdClass();
             $a->hour = (int)($timeleft / 3600);
             $a->min = (int)(($timeleft / 60) % 60);
@@ -1979,7 +1979,7 @@ class core_renderer extends renderer_base {
 
         $output = $this->box_start('generalbox modal modal-dialog modal-in-page show', 'notice', $attributes);
         $output .= $this->box_start('modal-content', 'modal-content');
-        $output .= $this->box_start('modal-header p-x-1', 'modal-header');
+        $output .= $this->box_start('modal-header px-3', 'modal-header');
         $output .= html_writer::tag('h4', get_string('confirm'));
         $output .= $this->box_end();
         $attributes = [
diff --git a/lib/templates/auth_digital_minor_page.mustache b/lib/templates/auth_digital_minor_page.mustache
index 73bf40acf32..7ee6759db36 100644
--- a/lib/templates/auth_digital_minor_page.mustache
+++ b/lib/templates/auth_digital_minor_page.mustache
@@ -43,7 +43,7 @@
                      <div class="card-title">
                         <h3>{{#str}}considereddigitalminor{{/str}}</h3>
                     </div>
-                    <div class="p-t-1 p-b-2">
+                    <div class="pt-3 pb-5">
                         <p>{{#str}}digitalminor_desc{{/str}}</p>
                         <p class="mb-0">{{{supportname}}}</p>
                         <p class="mb-0">{{{supportemail}}}</p>
diff --git a/lib/templates/filemanager_uploadform.mustache b/lib/templates/filemanager_uploadform.mustache
index 7f01067eba8..80b8e470a83 100644
--- a/lib/templates/filemanager_uploadform.mustache
+++ b/lib/templates/filemanager_uploadform.mustache
@@ -28,7 +28,7 @@
             <div class="fp-formset">
                 <div class="fp-file form-group">
                     <label>{{#str}}attachment, repository{{/str}}</label>
-                    <div class="p-x-1">
+                    <div class="px-3">
                         <input  type="file"/>
                     </div>
                 </div>
diff --git a/lib/tests/weblib_test.php b/lib/tests/weblib_test.php
index 4e813453672..e3f44d6b36d 100644
--- a/lib/tests/weblib_test.php
+++ b/lib/tests/weblib_test.php
@@ -806,7 +806,7 @@ EXPECTED;
 
         $html = "<p>This is a test.</p><p><img src=\"${url1}\" alt=\"\" role=\"presentation\"></p>
                 <br>Test content.<p></p><p><img src=\"{$url2}\" alt=\"\" width=\"2048\" height=\"1536\"
-                role=\"presentation\" class=\"img-responsive atto_image_button_text-bottom\"><br></p>";
+                role=\"presentation\" class=\"img-fluid atto_image_button_text-bottom\"><br></p>";
         $draftareas = array(
             array(
                 'urlbase' => 'draftfile.php',
diff --git a/message/templates/message_index.mustache b/message/templates/message_index.mustache
index 33e3ab62a82..8640609a554 100644
--- a/message/templates/message_index.mustache
+++ b/message/templates/message_index.mustache
@@ -42,7 +42,7 @@
         role="region"
 >
     <div class="container-fluid">
-        <div class="row-fluid h-100 no-gutters">
+        <div class="row h-100 no-gutters">
             <div class="col-4 d-flex flex-column conversationcontainer">
                 <div class="border-right h-100">
                     <div class="panel-header-container" data-region="panel-header-container">
@@ -81,4 +81,4 @@
     var root = $('#message-index-{{uniqid}}');
     MessageDrawer.init(root, '{{uniqid}}', true, {{{route}}});
     });
-{{/js}}
\ No newline at end of file
+{{/js}}
diff --git a/message/templates/message_preferences_component.mustache b/message/templates/message_preferences_component.mustache
index 52a63bd3c03..88b9aafcbff 100644
--- a/message/templates/message_preferences_component.mustache
+++ b/message/templates/message_preferences_component.mustache
@@ -65,7 +65,7 @@
         <th>{{displayname}}</th>
         <td class="align-bottom">
             <div class="container-fluid">
-                <div class="row-fluid">
+                <div class="row">
                     <div class="span6 col-6">
                         {{#str}} loggedin, message {{/str}}
                         {{#onlinehelphtml}}{{{.}}}{{/onlinehelphtml}}
diff --git a/message/templates/message_preferences_notification_processor.mustache b/message/templates/message_preferences_notification_processor.mustache
index 2b5f08b3b50..927e5e287aa 100644
--- a/message/templates/message_preferences_notification_processor.mustache
+++ b/message/templates/message_preferences_notification_processor.mustache
@@ -68,7 +68,7 @@
             <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
             <form>
                 <div class="container-fluid">
-                    <div class="row-fluid">
+                    <div class="row">
                         <div class="span6 col-6">
                             {{#loggedin}}
                                 {{< core/hover_tooltip }}
diff --git a/message/templates/notification_preferences_component.mustache b/message/templates/notification_preferences_component.mustache
index 2d9381e7451..0700fba8858 100644
--- a/message/templates/notification_preferences_component.mustache
+++ b/message/templates/notification_preferences_component.mustache
@@ -72,7 +72,7 @@
     {{#processors}}
         <td class="align-bottom">
             <div class="container-fluid">
-                <div class="row-fluid">
+                <div class="row">
                     <div class="col-6">
                         {{#str}} loggedin, message {{/str}}
                         {{#onlinehelphtml}}{{{.}}}{{/onlinehelphtml}}
diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index 7770700ed68..3318f0865a5 100644
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -66,7 +66,7 @@
                 <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
                 <form>
                     <div class="container-fluid">
-                        <div class="row-fluid">
+                        <div class="row">
                             <div class="col-6">
                                 {{#loggedin}}
                                     {{< core/hover_tooltip }}
diff --git a/mod/book/tool/print/classes/output/renderer.php b/mod/book/tool/print/classes/output/renderer.php
index 85a2b9030b5..7084ce49c19 100644
--- a/mod/book/tool/print/classes/output/renderer.php
+++ b/mod/book/tool/print/classes/output/renderer.php
@@ -123,7 +123,7 @@ class renderer extends plugin_renderer_base {
 
         $toc .= html_writer::tag('a', '', array('name' => 'toc')); // Representation of toc (HTML).
 
-        $toc .= html_writer::tag('h2', get_string('toc', 'mod_book'), ['class' => 'text-center p-b-2']);
+        $toc .= html_writer::tag('h2', get_string('toc', 'mod_book'), ['class' => 'text-center pb-5']);
         $toc .= html_writer::start_tag('ul');
         foreach ($chapters as $ch) {
             if (!$ch->hidden) {
@@ -189,12 +189,12 @@ class renderer extends plugin_renderer_base {
         $chaptervisible = $chapter->hidden ? false : true;
 
         $bookchapter = '';
-        $bookchapter .= html_writer::start_div('book_chapter p-t-1', ['id' => 'ch' . $chapter->id]);
+        $bookchapter .= html_writer::start_div('book_chapter pt-3', ['id' => 'ch' . $chapter->id]);
         if (!$book->customtitles) {
             if (!$chapter->subchapter) {
-                $bookchapter .= $this->output->heading($title, 2, 'text-center p-b-2');
+                $bookchapter .= $this->output->heading($title, 2, 'text-center pb-5');
             } else {
-                $bookchapter .= $this->output->heading($title, 3, 'text-center p-b-2');
+                $bookchapter .= $this->output->heading($title, 3, 'text-center pb-5');
             }
         }
 
diff --git a/mod/book/tool/print/templates/print_book.mustache b/mod/book/tool/print/templates/print_book.mustache
index 66f7db97bde..4cf50b72791 100644
--- a/mod/book/tool/print/templates/print_book.mustache
+++ b/mod/book/tool/print/templates/print_book.mustache
@@ -63,15 +63,15 @@
 }}
 <div class="book p-4">
     <div class="text-right">{{{ printdialoglink }}}</div>
-    <div class="text-center p-b-1 book_title">{{{ booktitle }}}</div>
-    <div class="book_info w-100 p-t-3 d-inline-block">
+    <div class="text-center pb-3 book_title">{{{ booktitle }}}</div>
+    <div class="book_info w-100 pt-6 d-inline-block">
         <div class="w-50 float-left">
             <table>
                 <tr>
                     <td>
                         {{# str }} site {{/ str }}:
                     </td>
-                    <td class="p-l-1">
+                    <td class="pl-3">
                         {{{ sitelink }}}
                     </td>
                 </tr>
@@ -79,7 +79,7 @@
                     <td>
                         {{# str }} course {{/ str }}:
                     </td>
-                    <td class="p-l-1">
+                    <td class="pl-3">
                         {{{ coursename }}}
                     </td>
                 </tr>
@@ -87,7 +87,7 @@
                     <td>
                         {{# str }} modulename, mod_book {{/ str }}:
                     </td>
-                    <td class="p-l-1">
+                    <td class="pl-3">
                         {{{ modulename }}}
                     </td>
                 </tr>
@@ -99,7 +99,7 @@
                     <td>
                         {{# str }} printedby, booktool_print {{/ str }}:
                     </td>
-                    <td class="p-l-1">
+                    <td class="pl-3">
                         {{{ username }}}
                     </td>
                 </tr>
@@ -107,7 +107,7 @@
                     <td>
                         {{# str }} printdate, booktool_print {{/ str }}:
                     </td>
-                    <td class="p-l-1">
+                    <td class="pl-3">
                         {{{ printdate }}}
                     </td>
                 </tr>
@@ -116,19 +116,19 @@
     </div>
     {{#bookintro}}
     <div class="w-100 book_description">
-        <div class="p-b-2 p-t-2">
-            <h2 class="text-center p-b-2">{{#str}} description {{/str}}</h2>
+        <div class="py-5">
+            <h2 class="text-center pb-5">{{#str}} description {{/str}}</h2>
              <p class="book_summary">{{{ bookintro }}}</p>
         </div>
     </div>
     {{/bookintro}}
     <div class="w-100">
-        <div class="p-b-2 p-t-2">{{{ toc }}}</div>
+        <div class="py-5">{{{ toc }}}</div>
     </div>
     <div class="w-100">
      {{#chapters}}
         {{#visible }}
-            <div class="p-b-2">
+            <div class="pb-5">
             {{{ content }}}
             </div>
         {{/visible}}
diff --git a/mod/book/tool/print/templates/print_book_chapter.mustache b/mod/book/tool/print/templates/print_book_chapter.mustache
index bfcc41dd0dc..6140acc2f2b 100644
--- a/mod/book/tool/print/templates/print_book_chapter.mustache
+++ b/mod/book/tool/print/templates/print_book_chapter.mustache
@@ -44,7 +44,7 @@
 }}
 <div class="chapter col-12 p-4">
     <div class="text-right">{{{ printdialoglink }}}</div>
-    <div class="text-center p-b-2">{{{ booktitle }}}</div>
+    <div class="text-center pb-5">{{{ booktitle }}}</div>
     <div class="chapter">
         {{#parentchaptertitle}}
          <div class="text-center">
diff --git a/mod/forum/report/summary/index.php b/mod/forum/report/summary/index.php
index 54ec58b3ee9..9159430f5e8 100644
--- a/mod/forum/report/summary/index.php
+++ b/mod/forum/report/summary/index.php
@@ -167,7 +167,7 @@ if ($download) {
     \forumreport_summary\event\report_viewed::create($eventparams)->trigger();
 
     echo $OUTPUT->header();
-    echo $OUTPUT->heading(get_string('summarytitle', 'forumreport_summary', $title), 2, 'p-b-2');
+    echo $OUTPUT->heading(get_string('summarytitle', 'forumreport_summary', $title), 2, 'pb-5');
 
     if (!empty($filters['groups'])) {
         \core\notification::info(get_string('viewsdisclaimer', 'forumreport_summary'));
diff --git a/mod/forum/report/summary/templates/filter_groups.mustache b/mod/forum/report/summary/templates/filter_groups.mustache
index b2a0e0333f8..3f4ce7ca3fd 100644
--- a/mod/forum/report/summary/templates/filter_groups.mustache
+++ b/mod/forum/report/summary/templates/filter_groups.mustache
@@ -53,7 +53,7 @@
 </div>
 
 {{! Groups filter popover }}
-<div id="filter-groups-popover" class="popover m-t-1 hidden" data-openfilter="false">
+<div id="filter-groups-popover" class="popover mt-3 hidden" data-openfilter="false">
     <h3 class="popover-header">{{# str}} filter:groupsname, forumreport_summary {{/ str}}</h3>
     <div class="popover-body" data-region="filter-groups">
         <div class="form-check filter-scrollable">
diff --git a/mod/forum/templates/discussion_list.mustache b/mod/forum/templates/discussion_list.mustache
index da67f2044a8..d63e483b666 100644
--- a/mod/forum/templates/discussion_list.mustache
+++ b/mod/forum/templates/discussion_list.mustache
@@ -50,7 +50,7 @@
     {{{groupchangemenu}}}
 
 
-    <div class="p-t-1 p-b-1">
+    <div class="py-3">
         {{#forum.capabilities.create}}
             <a class="btn btn-primary" data-toggle="collapse" href="#collapseAddForm">
                 {{$discussion_create_text}}
@@ -60,7 +60,7 @@
         {{/forum.capabilities.create}}
         {{^forum.capabilities.create}}
             {{#forum.capabilities.selfenrol}}
-                <div class="p-t-1 p-b-1">
+                <div class="py-3">
                     <a class="btn btn-primary" href="{{forum.urls.create}}">
                         {{$discussion_create_text}}
                             {{#str}}addanewdiscussion, forum{{/str}}
@@ -81,7 +81,7 @@
         {{/forum.capabilities.grade}}
     </div>
     {{#forum.capabilities.create}}
-        <div class="collapse m-t-1 p-b-1" id="collapseAddForm">
+        <div class="collapse mt-3 pb-3" id="collapseAddForm">
             {{{newdiscussionhtml}}}
         </div>
     {{/forum.capabilities.create}}
@@ -101,7 +101,7 @@
                         <th scope="col">
                             <span class="accesshide">{{#str}}status{{/str}}</span>
                         </th>
-                        <th scope="col" class="p-l-0">
+                        <th scope="col" class="pl-0">
                             {{#state.sortorder.isdiscussiondesc}}
                                 <a href="{{{forum.urls.sortdiscussionasc}}}" aria-label="{{#str}}discussionlistsortbydiscussionasc, mod_forum{{/str}}">{{#str}}discussion, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
                             {{/state.sortorder.isdiscussiondesc}}
@@ -206,7 +206,7 @@
                                 {{/discussion.pinned}}
                             </td>
                             <th scope="row" class="topic p-0 align-middle">
-                                <div class="p-3 p-l-0">
+                                <div class="p-3 pl-0">
                                     <a class="w-100 h-100 d-block" href="{{discussion.urls.view}}" title="{{discussion.name}}" aria-label="{{discussion.name}}">
                                         {{#shortentext}}100, {{{discussion.name}}}{{/shortentext}}
                                     </a>
diff --git a/mod/forum/templates/forum_discussion.mustache b/mod/forum/templates/forum_discussion.mustache
index f423c8e2274..aebd5e213b4 100644
--- a/mod/forum/templates/forum_discussion.mustache
+++ b/mod/forum/templates/forum_discussion.mustache
@@ -33,7 +33,7 @@
 <div id="discussion-container-{{uniqid}}" data-content="forum-discussion">
 {{#html}}
     {{#hasanyactions}}
-    <div class="d-flex flex-wrap flex-row-reverse m-b-1 text-right" data-container="discussion-tools">
+    <div class="d-flex flex-wrap flex-row-reverse mb-3 text-right" data-container="discussion-tools">
         <div class="pl-1">
             <div class="discussion-settings-menu">
                 {{> mod_forum/forum_action_menu}}
diff --git a/mod/forum/templates/local/grades/view_grade.mustache b/mod/forum/templates/local/grades/view_grade.mustache
index 920556c307f..b6fca4b8a0c 100644
--- a/mod/forum/templates/local/grades/view_grade.mustache
+++ b/mod/forum/templates/local/grades/view_grade.mustache
@@ -39,11 +39,11 @@
 }}
 <div class="container-fluid grade-display" data-region="view-grade">
     {{#grade}}
-        <div class="row-fluid px-3">
+        <div class="row px-3">
             <h5 class="font-weight-bold description">{{#str}}grade{{/str}}:</h5>
             <p class="ml-auto">{{usergrade}} / {{maxgrade}}</p>
         </div>
-        <div class="row-fluid px-3">
+        <div class="row px-3">
             <h5 class="font-weight-bold description">{{#str}}gradedby, forum{{/str}}:</h5>
             <p class="ml-auto">
                 {{#gradedby}}
@@ -54,12 +54,12 @@
                 {{/gradedby}}
             </p>
         </div>
-        <div class="row-fluid px-3">
+        <div class="row px-3">
             <h5 class="font-weight-bold description">{{#str}}date{{/str}}:</h5>
             <p class="ml-auto">{{#userdate}}{{timemodified}}, {{#str}} strftimedate, langconfig {{/str}}{{/userdate}}</p>
         </div>
     {{/grade}}
-    <div class="row-fluid px-3">
+    <div class="row px-3">
         <h5 class="font-weight-bold description">
             {{#str}}gradingstatus, forum{{/str}}
         </h5>
@@ -72,7 +72,7 @@
             {{/hasgrade}}
         </p>
     </div>
-    <div class="row-fluid p-3">
+    <div class="row p-3">
         <fieldset class="w-100" disabled="disabled">
             <div class="w-100" data-region="grade-template"></div>
         </fieldset>
diff --git a/mod/forum/tests/mail_test.php b/mod/forum/tests/mail_test.php
index c7f4a44d2a1..9902a29c0ec 100644
--- a/mod/forum/tests/mail_test.php
+++ b/mod/forum/tests/mail_test.php
@@ -1117,7 +1117,7 @@ class mod_forum_mail_testcase extends advanced_testcase {
         $newcase['forums'][0]['forumposts'][0]['name'] = 'HTML text and image';
         $newcase['forums'][0]['forumposts'][0]['message'] = '<p>Welcome to Moodle, '
             .'<img src="@@PLUGINFILE@@/Screen%20Shot%202016-03-22%20at%205.54.36%20AM%20%281%29.png"'
-            .' alt="" width="200" height="393" class="img-responsive" />!</p>';
+            .' alt="" width="200" height="393" class="img-fluid" />!</p>';
         $newcase['expectations'][0]['subject'] = '.*101.*HTML text and image';
         $newcase['expectations'][0]['contents'] = array(
             '~{\$a',
@@ -1127,7 +1127,7 @@ class mod_forum_mail_testcase extends advanced_testcase {
             '<p>Welcome to Moodle, '
             .'<img src="https://www.example.com/moodle/tokenpluginfile.php/[^/]*/\d+/mod_forum/post/\d+/'
                 .'Screen%20Shot%202016-03-22%20at%205\.54\.36%20AM%20%281%29\.png"'
-                .' alt="" width="200" height="393" class="img-responsive" />!</p>',
+                .' alt="" width="200" height="393" class="img-fluid" />!</p>',
             '>Love Moodle', '>1\d1');
         $htmlcases['HTML mail with text+image message i.e. @@PLUGINFILE@@ token handling'] = array('data' => $newcase);
 
diff --git a/mod/glossary/formats/entrylist/entrylist_format.php b/mod/glossary/formats/entrylist/entrylist_format.php
index b1482f6793a..aae1cc0c007 100644
--- a/mod/glossary/formats/entrylist/entrylist_format.php
+++ b/mod/glossary/formats/entrylist/entrylist_format.php
@@ -25,7 +25,7 @@ function glossary_show_entry_entrylist($course, $cm, $glossary, $entry, $mode=''
         }
         if (!empty($entry->rating)) {
             echo '<br />';
-            echo '<span class="ratings d-block p-t-1">';
+            echo '<span class="ratings d-block pt-3">';
             $return = glossary_print_entry_ratings($course, $entry);
             echo '</span>';
         }
diff --git a/mod/glossary/lib.php b/mod/glossary/lib.php
index 66933cc7b4d..596660c4734 100644
--- a/mod/glossary/lib.php
+++ b/mod/glossary/lib.php
@@ -1369,7 +1369,7 @@ function  glossary_print_entry_lower_section($course, $cm, $glossary, $entry, $m
             echo '<tr valign="top"><td class="icons">'.$icons.'</td></tr>';
         }
         if (!empty($entry->rating)) {
-            echo '<tr valign="top"><td class="ratings p-t-1">';
+            echo '<tr valign="top"><td class="ratings pt-3">';
             glossary_print_entry_ratings($course, $entry);
             echo '</td></tr>';
         }
diff --git a/mod/lesson/locallib.php b/mod/lesson/locallib.php
index 9b1cb3ae41d..5f001e1f224 100644
--- a/mod/lesson/locallib.php
+++ b/mod/lesson/locallib.php
@@ -2317,7 +2317,7 @@ class lesson extends lesson_base {
                 if ($instancename) {
                     return html_writer::link(new moodle_url('/mod/'.$modname.'/view.php',
                         array('id' => $this->properties->activitylink)), get_string('activitylinkname',
-                        'lesson', $instancename), array('class' => 'centerpadded lessonbutton standardbutton p-r-1'));
+                        'lesson', $instancename), array('class' => 'centerpadded lessonbutton standardbutton pr-3'));
                 }
             }
         }
@@ -4261,7 +4261,7 @@ abstract class lesson_page extends lesson_base {
                 $options->attemptid = isset($attempt) ? $attempt->id : null;
 
                 $result->feedback .= $OUTPUT->box(format_text($this->get_contents(), $this->properties->contentsformat, $options),
-                        'generalbox boxaligncenter p-y-1');
+                        'generalbox boxaligncenter py-3');
                 $result->feedback .= '<div class="correctanswer generalbox"><em>'
                         . get_string("youranswer", "lesson").'</em> : <div class="studentanswer mt-2 mb-2">';
 
diff --git a/mod/lesson/renderer.php b/mod/lesson/renderer.php
index 6b8cfb40d29..10066f9b8c4 100644
--- a/mod/lesson/renderer.php
+++ b/mod/lesson/renderer.php
@@ -620,7 +620,8 @@ class mod_lesson_renderer extends plugin_renderer_base {
         $output .= $this->box_end(); // End of Lesson button to Continue.
 
         if ($data->reviewlesson !== false) {
-            $output .= html_writer::link($data->reviewlesson, get_string('reviewlesson', 'lesson'), array('class' => 'centerpadded lessonbutton standardbutton p-r-1'));
+            $output .= html_writer::link($data->reviewlesson, get_string('reviewlesson', 'lesson'),
+                array('class' => 'centerpadded lessonbutton standardbutton pr-3'));
         }
         if ($data->modattemptsnoteacher !== false) {
             $output .= $this->paragraph(get_string("modattemptsnoteacher", "lesson"), 'centerpadded');
@@ -632,13 +633,13 @@ class mod_lesson_renderer extends plugin_renderer_base {
 
         $url = new moodle_url('/course/view.php', array('id' => $course->id));
         $output .= html_writer::link($url, get_string('returnto', 'lesson', format_string($course->fullname, true)),
-                array('class' => 'centerpadded lessonbutton standardbutton p-r-1'));
+                array('class' => 'centerpadded lessonbutton standardbutton pr-3'));
 
         if (has_capability('gradereport/user:view', context_course::instance($course->id))
                 && $course->showgrades && $lesson->grade != 0 && !$lesson->practice) {
             $url = new moodle_url('/grade/index.php', array('id' => $course->id));
             $output .= html_writer::link($url, get_string('viewgrades', 'lesson'),
-                array('class' => 'centerpadded lessonbutton standardbutton p-r-1'));
+                array('class' => 'centerpadded lessonbutton standardbutton pr-3'));
         }
         return $output;
     }
diff --git a/mod/quiz/templates/modal_add_random_question.mustache b/mod/quiz/templates/modal_add_random_question.mustache
index 8883d1657d9..6d538c7c78f 100644
--- a/mod/quiz/templates/modal_add_random_question.mustache
+++ b/mod/quiz/templates/modal_add_random_question.mustache
@@ -57,15 +57,15 @@
         </li>
     </ul>
     <div class="tab-content" data-region="tab-content">
-        <div class="text-sm-center p-t-2" data-region="loading-container">
+        <div class="text-sm-center pt-5" data-region="loading-container">
             {{> core/loading }}
         </div>
-        <div class="tab-pane active p-t-1"
+        <div class="tab-pane active pt-3"
             id="existing-category-{{uniqid}}"
             role="tabpanel"
             data-region="existing-category-container">
         </div>
-        <div class="tab-pane p-t-1"
+        <div class="tab-pane pt-3"
             id="new-category-{{uniqid}}"
             role="tabpanel"
             data-region="new-category-container">
diff --git a/mod/quiz/tests/behat/manually_mark_question.feature b/mod/quiz/tests/behat/manually_mark_question.feature
index d8218f3d0f5..10df50b062c 100644
--- a/mod/quiz/tests/behat/manually_mark_question.feature
+++ b/mod/quiz/tests/behat/manually_mark_question.feature
@@ -76,7 +76,7 @@ Feature: Teachers can override the grade for any question
     And I click on "Save image" "button"
     # Editor is not inserting the html for the image correctly
     # when running under behat so line below manually inserts it.
-    And I set the field "Comment" to "<img src=\"@@PLUGINFILE@@/moodle_logo.jpg\" alt=\"It's the logo\" width=\"48\" height=\"48\" class=\"img-responsive atto_image_button_text-bottom\"><!-- File hash: a8e3ffba4ab315b3fb9187ebbf122fe9 -->"
+    And I set the field "Comment" to "<img src=\"@@PLUGINFILE@@/moodle_logo.jpg\" alt=\"It's the logo\" width=\"48\" height=\"48\" class=\"img-fluid atto_image_button_text-bottom\"><!-- File hash: a8e3ffba4ab315b3fb9187ebbf122fe9 -->"
     And I press "Save" and switch to main window
     And I switch to the main window
     And I should see "Commented: [It's the logo]" in the ".history table" "css_element"
diff --git a/question/type/ddimageortext/rendererbase.php b/question/type/ddimageortext/rendererbase.php
index c7d348d6197..f1b4e1b43cb 100644
--- a/question/type/ddimageortext/rendererbase.php
+++ b/question/type/ddimageortext/rendererbase.php
@@ -70,7 +70,7 @@ class qtype_ddtoimage_renderer_base extends qtype_with_combined_feedback_rendere
         $output .= html_writer::start_div('ddarea');
         $output .= html_writer::start_div($dropareaclass);
         $output .= html_writer::img(self::get_url_for_image($qa, 'bgimage'), get_string('dropbackground', 'qtype_ddmarker'),
-                ['class' => 'dropbackground img-responsive img-fluid']);
+                ['class' => 'dropbackground img-fluid w-100']);
 
         $output .= html_writer::div('', 'dropzones');
         $output .= html_writer::end_div();
diff --git a/question/type/ddimageortext/styles.css b/question/type/ddimageortext/styles.css
index 3b93673bd16..e15f04758e1 100644
--- a/question/type/ddimageortext/styles.css
+++ b/question/type/ddimageortext/styles.css
@@ -39,10 +39,6 @@ form.mform fieldset#id_previewareaheader .dropbackground {
     max-width: none;
 }
 
-.que.ddimageortext .dropbackground.img-responsive.img-fluid {
-    width: 100%;
-}
-
 .que.ddimageortext .dropzone {
     display: none;
     position: absolute;
diff --git a/question/type/ddmarker/renderer.php b/question/type/ddmarker/renderer.php
index 180faa59c68..6ea52782dd1 100644
--- a/question/type/ddmarker/renderer.php
+++ b/question/type/ddmarker/renderer.php
@@ -58,7 +58,7 @@ class qtype_ddmarker_renderer extends qtype_ddtoimage_renderer_base {
         $output .= html_writer::start_div('ddarea');
         $output .= html_writer::start_div($dropareaclass);
         $output .= html_writer::img(self::get_url_for_image($qa, 'bgimage'), get_string('dropbackground', 'qtype_ddmarker'),
-                ['class' => 'dropbackground img-responsive img-fluid']);
+                ['class' => 'dropbackground img-fluid w-100']);
 
         $output .= html_writer::div('', 'dropzones');
         $output .= html_writer::div('', 'markertexts');
diff --git a/question/type/ddmarker/styles.css b/question/type/ddmarker/styles.css
index e51e60beb36..3b416f459ea 100644
--- a/question/type/ddmarker/styles.css
+++ b/question/type/ddmarker/styles.css
@@ -64,10 +64,6 @@ form.mform fieldset#id_previewareaheader .dropbackground {
     max-width: none;
 }
 
-.que.ddmarker .dropbackground.img-responsive.img-fluid {
-    width: 100%;
-}
-
 .que.ddmarker div.dragitems div.draghome,
 .que.ddmarker div.dragitems div.dragitem,
 form.mform fieldset#id_previewareaheader div.draghome,
diff --git a/report/competency/templates/report.mustache b/report/competency/templates/report.mustache
index 2671f7da087..85538be3b4e 100644
--- a/report/competency/templates/report.mustache
+++ b/report/competency/templates/report.mustache
@@ -34,7 +34,7 @@
     </p>
 {{/pushratingstouserplans}}
 </div>
-<div class="row-fluid">
+<div class="row">
 <span class="col-md-6">
     <table class="table table-bordered">
         <summary class="accesshide">
diff --git a/report/participation/index.php b/report/participation/index.php
index ef7a6172273..c328f657607 100644
--- a/report/participation/index.php
+++ b/report/participation/index.php
@@ -366,7 +366,7 @@ if (!empty($instanceid) && !empty($roleid)) {
             echo $OUTPUT->render($checknos);
         }
         echo '</div>';
-        echo '<div class="p-y-1">';
+        echo '<div class="py-3">';
         echo html_writer::label(get_string('withselectedusers'), 'formactionid');
         $displaylist['#messageselect'] = get_string('messageselectadd');
         $withselectedparams = array(
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index 7ec7033e0d4..d79ac1f6997 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -1,13 +1,12 @@
 $breadcrumb-divider: "▶" !default;
 $breadcrumb-divider-rtl: "◀" !default;
-// Making BS4 Stable compatible with BS4 Alpha for moodle core sass
-@import "moodle/bs4alphacompat";
 
 // Specific overrides to make Bootstrap RTL.
 @import "moodle/bootstrap-rtl";
 
 // Old Moodle stuff from base theme.
 // Massive, needs broken up.
+@import "moodle/variables";
 @import "moodle/core";
 @import "moodle/icons";
 @import "moodle/admin";
@@ -38,7 +37,6 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/sticky-footer";
 @import "moodle/popover-region";
 @import "moodle/tool_usertours";
-@import "moodle/bs2-compat";
 @import "moodle/print";
 @import "moodle/modal";
 @import "moodle/layout";
diff --git a/theme/boost/scss/moodle/admin.scss b/theme/boost/scss/moodle/admin.scss
index bbecc7ebd5a..b89ad6f2348 100644
--- a/theme/boost/scss/moodle/admin.scss
+++ b/theme/boost/scss/moodle/admin.scss
@@ -17,17 +17,17 @@
 .environmenttable {
     .warn {
         background-color: $state-warning-bg;
-        color: $state-warning-text;
+        color: $warning;
     }
 
     .error {
         background-color: $state-danger-bg;
-        color: $state-danger-text;
+        color: $danger;
     }
 
     .ok {
         background-color: $state-success-bg;
-        color: $state-success-text;
+        color: $success;
     }
 }
 
@@ -105,7 +105,7 @@
     text-align: left;
     margin-left: auto;
     margin-right: auto;
-    margin-top: $spacer-y;
+    margin-top: $spacer;
 }
 
 #page-admin-roles-define .topfields {
@@ -113,7 +113,7 @@
 }
 
 #page-admin-roles-define .capdefault {
-    background-color: $table-bg-hover;
+    background-color: $table-hover-bg;
 }
 
 #page-filter-manage .backlink,
@@ -484,7 +484,7 @@
 
         .uninstall {
             a {
-                color: $state-danger-text;
+                color: $danger;
             }
         }
 
diff --git a/theme/boost/scss/moodle/backup-restore.scss b/theme/boost/scss/moodle/backup-restore.scss
index 64dddd56a01..cedea6465bf 100644
--- a/theme/boost/scss/moodle/backup-restore.scss
+++ b/theme/boost/scss/moodle/backup-restore.scss
@@ -19,13 +19,13 @@
         width: 50%;
         display: inline-block;
         float: left;
-        padding: $table-sm-cell-padding;
+        padding: $table-cell-padding-sm;
     }
     .normal_setting {
         width: 50%;
         display: inline-block;
         float: left;
-        padding: $table-sm-cell-padding;
+        padding: $table-cell-padding-sm;
     }
 }
 
@@ -48,7 +48,7 @@
     .grouped_settings {
         /* Striped rows like a table */
         &:nth-of-type(odd) {
-            background-color: $table-bg-accent;
+            background-color: $table-accent-bg;
         }
         &:nth-of-type(even) {
             background-color: $card-bg;
@@ -114,13 +114,13 @@
 }
 
 .path-backup .notification.dependencies_enforced {
-    color: $state-danger-text;
+    color: $danger;
     font-weight: bold;
 }
 
 .path-backup .backup_progress {
-    margin-top: $spacer-y;
-    margin-bottom: $spacer-y;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
 
     .backup_stage {
         color: $text-muted;
diff --git a/theme/boost/scss/moodle/bs2-compat.scss b/theme/boost/scss/moodle/bs2-compat.scss
deleted file mode 100644
index e8552a8220e..00000000000
--- a/theme/boost/scss/moodle/bs2-compat.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-// Some - backwards compatibility for BS2. We may have plugins and user content targeted for BS2.
-
-// Well -> Panel -> Card. We skipped panel (BS3) so lets just support well and card.
-.well {
-    border: $border-width solid $border-color;
-    padding: $card-spacer-x;
-}
-
-// Some things just got renamed.
-.img-responsive {
-    @include img-fluid;
-}
-
-.text-error {
-    color: map-get($theme-colors, 'danger');
-}
-
-.btn-default {
-    @include button-variant(map-get($theme-colors, 'secondary'), map-get($theme-colors, 'secondary'));
-}
-
-.label {
-    display: inline-block;
-    padding: $badge-padding-y $badge-padding-x;
-    @include font-size($badge-font-size);
-    font-weight: $badge-font-weight;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    @include border-radius($badge-border-radius);
-    @include transition($badge-transition);
-    @include badge-variant($tag-default-bg);
-}
-
-.label-success {
-    @include badge-variant($tag-success-bg);
-}
-
-.label-info {
-    @include badge-variant($tag-info-bg);
-}
-
-.label-warning {
-    @include badge-variant($tag-warning-bg);
-}
-
-.label-important {
-    @include badge-variant($tag-danger-bg);
-}
-
-// Floats.
-.pull-left {
-    @include pull-left();
-}
-
-.pull-right {
-    @include pull-right();
-}
diff --git a/theme/boost/scss/moodle/bs4alphacompat.scss b/theme/boost/scss/moodle/bs4alphacompat.scss
deleted file mode 100644
index 1bd88c4c0f9..00000000000
--- a/theme/boost/scss/moodle/bs4alphacompat.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-$font-size-xs: ($font-size-base * .75) !default;
-$font-size-root: $font-size-base;
-
-$zindex-navbar-fixed: 1030 !default;
-$tag-padding-y: .25rem !default;
-
-/* stylelint-disable function-url-scheme-blacklist */
-$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
-$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
-$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
-/* stylelint-enable function-url-scheme-blacklist */
-
-$input-bg-disabled: $input-disabled-bg;
-$table-sm-cell-padding: $table-cell-padding-sm;
-$popover-arrow-outer-width: 11px !default;
-$modal-title-padding: $modal-header-padding;
-$pagination-hover-border: $pagination-hover-border-color;
-$pagination-active-border: $pagination-active-border-color;
-
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-800 !default;
-
-$brand-primary: $primary;
-$brand-success: $success;
-$brand-info: $info;
-$brand-warning: $warning;
-$brand-danger: $danger;
-
-$spacer: 1rem !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
-
-$gray-dark: $gray-900;
-$gray: $gray-700;
-$gray-light: $gray-600;
-$gray-lighter: $gray-300;
-$gray-lightest: $gray-100;
-
-$table-bg-hover: $table-hover-bg;
-$table-bg-accent: $table-accent-bg;
-
-$tag-default-bg: $gray-light !default;
-$tag-primary-bg: $brand-primary !default;
-$tag-success-bg: $brand-success !default;
-$tag-info-bg: $brand-info !default;
-$tag-warning-bg: $brand-warning !default;
-$tag-danger-bg: $brand-danger !default;
-
-$state-success-text: $success;
-$state-success-bg: theme-color-level("success", -10) !default;
-$state-success-border: theme-color-level("success", -9) !default;
-
-$state-info-text: $info;
-$state-info-bg: theme-color-level("info", -10) !default;
-$state-info-border: theme-color-level("info", -9) !default;
-
-$state-warning-text: $warning;
-$state-warning-bg: theme-color-level("warning", -10) !default;
-$state-warning-border: theme-color-level("warning", -10) !default;
-
-$state-danger-text: $danger;
-$state-danger-bg: theme-color-level("danger", -10) !default;
-$state-danger-border: theme-color-level("danger", -9) !default;
-
-@mixin form-control-validation($color) {
-    // Color the label and help text
-    .form-control-feedback,
-    .form-control-label,
-    .form-check-label,
-    .form-check-inline,
-    .custom-control {
-        color: $color;
-    }
-    // Set the border and box shadow on specific inputs to match
-    .form-control {
-        border-color: $color;
-    }
-
-    // Set validation states also for addons
-    .input-group-addon {
-        color: $color;
-        border-color: $color;
-        background-color: lighten($color, 40%);
-    }
-    // Optional feedback icon
-    .form-control-feedback {
-        color: $color;
-    }
-}
-
-$tag-padding-x: .4em !default;
-$tag-padding-y: .25em !default;
-$tag-font-size: 75% !default;
-$tag-color: #fff !default;
-$tag-font-weight: bold !default;
-
-.tag {
-    display: inline-block;
-    padding: $tag-padding-y $tag-padding-x;
-    font-size: $tag-font-size;
-    font-weight: $tag-font-weight;
-    line-height: 1;
-    color: $tag-color;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    @include border-radius();
-
-    // Empty tags collapse automatically
-    &:empty {
-        display: none;
-    }
-}
-
-.form-control-success,
-.form-control-warning,
-.form-control-danger {
-    padding-right: ($input-padding-x * 3);
-    background-repeat: no-repeat;
-    background-position: center right ($input-height / 4);
-    background-size: ($input-height / 2) ($input-height / 2);
-}
-
-// .form-check-input {
-//     position: static;
-// }
-
-@mixin tag-variant($color) {
-    background-color: $color;
-
-    &[href] {
-        @include hover-focus {
-            background-color: darken($color, 10%);
-        }
-    }
-}
-
-.tag-default {
-    @include tag-variant($tag-default-bg);
-}
-
-.tag-primary {
-    @include tag-variant($tag-primary-bg);
-}
-
-.tag-success {
-    @include tag-variant($tag-success-bg);
-}
-
-.tag-info {
-    @include tag-variant($tag-info-bg);
-}
-
-.tag-warning {
-    @include tag-variant($tag-warning-bg);
-}
-
-.tag-danger {
-    @include tag-variant($tag-danger-bg);
-}
-
-@mixin pull-left() {
-    float: left !important; /* stylelint-disable-line declaration-no-important */
-}
-
-@mixin pull-right() {
-    float: right !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.custom-select {
-    width: auto;
-}
-
-.fade.in {
-    opacity: 1;
-}
-
-// Adding compatibility for m-side-* classes.
-// stylelint-disable
-$spacer: 1rem !default;
-$bs4aspacers: () !default;
-$bs4aspacers: map-merge((
-  0: 0,
-  1: ($spacer * 1),
-  2: ($spacer * 2),
-  3: ($spacer * 3)
-), $bs4aspacers);
-
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $length in $bs4aspacers {
-
-    .#{$abbrev}-a-#{$size} { #{$prop}: $length !important; }
-    .#{$abbrev}-t-#{$size},
-    .#{$abbrev}-y-#{$size} {
-      #{$prop}-top: $length !important;
-    }
-    .#{$abbrev}-r-#{$size},
-    .#{$abbrev}-x-#{$size} {
-      #{$prop}-right: $length !important;
-    }
-    .#{$abbrev}-b-#{$size},
-    .#{$abbrev}-y-#{$size} {
-      #{$prop}-bottom: $length !important;
-    }
-    .#{$abbrev}-l-#{$size},
-    .#{$abbrev}-x-#{$size} {
-      #{$prop}-left: $length !important;
-    }
-  }
-}
-
-input[disabled] {
-    cursor: not-allowed;
-}
-
-.row-fluid {
-  @include make-row();
-}
-
-// These have been removed in BS4 Stable. Adding in so RTL dropdowns will work.
-/*rtl:raw:
-.dropdown-menu-right {
-    right: 0;
-    left: auto;
-}
-.dropdown-menu-left {
-    right: auto;
-    left: 0;
-}
-*/
diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss
index 53fdb52eac8..e8977fd7897 100644
--- a/theme/boost/scss/moodle/calendar.scss
+++ b/theme/boost/scss/moodle/calendar.scss
@@ -73,7 +73,7 @@ $calendarEventOtherColor: #ced4da !default; // Pale gray.
 
         .drop-target {
             box-sizing: border-box;
-            border: 1px dashed $brand-primary;
+            border: 1px dashed $primary;
         }
     }
 
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 00b15834538..9bf60819850 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -5,6 +5,8 @@
 // want white default colour.
 $bg-inverse-link-color: #fff !default;
 
+$font-size-xs: ($font-size-base * .75) !default;
+
 #region-main {
     overflow-x: auto;
     overflow-y: visible;
@@ -577,7 +579,7 @@ a.skip:active {
 
 // My Moodle
 .path-my .coursebox {
-    margin: $spacer-y 0;
+    margin: $spacer 0;
     padding: 0;
 
     .overview {
@@ -1215,7 +1217,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
 
 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
 .moodle-dialogue-base .moodle-dialogue-lightbox {
-    background-color: $gray;
+    background-color: $gray-700;
 }
 
 // Prevent adding backdrops to popups in popups.
@@ -2345,7 +2347,7 @@ $footer-link-color: $bg-inverse-link-color !default;
 .sr-only-focusable {
     &:active,
     &:focus {
-        z-index: $zindex-navbar-fixed + 1;
+        z-index: 1031;
         position: fixed;
         background: #fff;
         padding: 7px;
@@ -2477,10 +2479,27 @@ body.h5p-embed {
 .float-left {
     float: left !important; /* stylelint-disable-line declaration-no-important */
 }
+
 .float-right {
     float: right !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.img-responsive {
+    @include img-fluid();
+}
+
+input[disabled] {
+    cursor: not-allowed;
+}
+
+.custom-select {
+    width: auto;
+}
+
+.fade.in {
+    opacity: 1;
+}
+
 .clamp-2 {
     display: -webkit-box;
     -webkit-box-orient: vertical;
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 13490037851..d2738872158 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -225,7 +225,7 @@ body:not(.editing)  .sitetopic ul.section {
 
 .editing .section .activity:hover,
 .editing .section .activity.action-menu-shown {
-    background-color: $table-bg-accent;
+    background-color: $table-accent-bg;
 }
 
 .course-content .current {
@@ -234,7 +234,7 @@ body:not(.editing)  .sitetopic ul.section {
 
 .course-content .current::before {
     content: "";
-    border-left: $brand-primary 2px solid;
+    border-left: $primary 2px solid;
     position: absolute;
     left: -$card-spacer-x;
     top: 0;
@@ -538,7 +538,7 @@ span.editinstructions {
     font-size: $font-size-sm;
     padding: .1em .4em;
     background-color: $state-info-bg;
-    color: $state-info-text;
+    color: $info;
     text-decoration: none;
     z-index: 9999;
 
@@ -556,7 +556,7 @@ span.editinstructions {
     border: 1px solid $state-info-border;
     text-align: center;
     background: $state-info-bg;
-    color: $state-info-text;
+    color: $info;
     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
 
     @include box-shadow(2px 2px 5px 1px #ccc);
@@ -712,12 +712,12 @@ span.editinstructions {
 
 .courses .coursebox {
     &.collapsed {
-        padding-top: $spacer-y / 2;
-        padding-bottom: $spacer-y / 2;
+        padding-top: $spacer / 2;
+        padding-bottom: $spacer / 2;
     }
 
     &.even {
-        background-color: $table-bg-accent;
+        background-color: $table-accent-bg;
     }
 }
 
@@ -948,7 +948,7 @@ span.editinstructions {
             > div,
             > div:hover,
             &[data-selected='1'] > div {
-                background-color: $table-bg-hover;
+                background-color: $table-hover-bg;
             }
         }
     }
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 8eae03e50ee..e60306ec40f 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -69,7 +69,7 @@
 }
 
 #adminsettings .error {
-    color: $state-danger-text;
+    color: $danger;
 }
 
 .mform ul.file-list {
@@ -290,7 +290,7 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
     position: absolute;
     background-color: white;
-    border: 2px solid $gray-lighter;
+    border: 2px solid $gray-300;
     border-radius: 3px;
     min-width: 206px;
     max-height: 20em;
@@ -316,7 +316,7 @@ fieldset.coursesearchbox label {
 
 .form-autocomplete-suggestions li[aria-selected=true] {
     background-color: darken($dropdown-bg, 5%);
-    color: $gray;
+    color: $gray-700;
 }
 
 .form-autocomplete-downarrow {
@@ -411,9 +411,11 @@ textarea[data-auto-rows] {
 
 /** Atto fields do not have form-control because that would break the layout of the editor.
     So they need these extra styles to highlight the editor when there is a validation error. */
+/* stylelint-disable function-url-scheme-blacklist */
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
+/* stylelint-enable function-url-scheme-blacklist */
 .has-danger .editor_atto_content.form-control,
 .has-danger .editor_atto_content.form-control-danger {
-    @include form-control-validation($brand-danger);
     background-image: $form-icon-danger;
     padding-right: ($input-padding-x * 3);
     background-repeat: no-repeat;
diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss
index 04d6f617a90..a97af4d458a 100644
--- a/theme/boost/scss/moodle/grade.scss
+++ b/theme/boost/scss/moodle/grade.scss
@@ -368,7 +368,7 @@
 
     &.generaltable {
         .levelodd {
-            background-color: $table-bg-accent;
+            background-color: $table-accent-bg;
         }
 
         .leveleven {
@@ -401,7 +401,7 @@
         .heading .cell,
         .cell.category,
         .avg .cell {
-            background-color: $gray-lightest;
+            background-color: $gray-100;
         }
 
         table .clickable {
@@ -418,7 +418,7 @@
 
     &.generaltable {
         .levelodd {
-            background-color: $table-bg-accent;
+            background-color: $table-accent-bg;
         }
 
         .leveleven {
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index f146898d9a0..74585484007 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -967,10 +967,6 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
     margin-left: 4px;
 }
 
-.ie .row-fluid .desktop-first-column {
-    margin-left: 0;
-}
-
 .langmenu form {
     margin: 0;
 }
@@ -1049,7 +1045,7 @@ div#dock {
         }
 
         > tbody > tr:nth-of-type(even) {
-            background-color: $table-bg-accent;
+            background-color: $table-accent-bg;
         }
 
         .rblock label {
@@ -1187,8 +1183,8 @@ div#dock {
 
     span.qnbutton {
         cursor: default;
-        background-color: $input-bg-disabled;
-        color: $gray;
+        background-color: $input-disabled-bg;
+        color: $gray-700;
     }
 
     a.qnbutton:hover,
@@ -1234,28 +1230,28 @@ div#dock {
 
     .qnbutton.correct .trafficlight {
         background-image: url([[pix:theme|mod/quiz/checkmark]]);
-        background-color: $state-success-text;
+        background-color: $success;
     }
 
     .qnbutton.blocked .trafficlight {
         background-image: url([[pix:core|t/locked]]);
-        background-color: $input-bg-disabled;
+        background-color: $input-disabled-bg;
     }
 
     .qnbutton.notanswered .trafficlight,
     .qnbutton.incorrect .trafficlight {
-        background-color: $state-danger-text;
+        background-color: $danger;
     }
 
     .qnbutton.partiallycorrect .trafficlight {
         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
-        background-color: $state-warning-text;
+        background-color: $warning;
     }
 
     .qnbutton.complete .trafficlight,
     .qnbutton.answersaved .trafficlight,
     .qnbutton.requiresgrading .trafficlight {
-        background-color: $gray-light;
+        background-color: $gray-600;
     }
 }
 
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index 4ed5c9a5c8c..fc93c2b24d5 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -245,8 +245,8 @@ body.path-question-type {
     width: 7em;
     padding: 0.5em;
     margin-bottom: 1.8em;
-    background-color: $gray-lighter;
-    border: 1px solid darken($gray-lighter, 7%);
+    background-color: $gray-300;
+    border: 1px solid darken($gray-300, 7%);
 
     @include border-radius(2px);
 }
@@ -350,14 +350,14 @@ body.path-question-type {
 
 .que .correctness {
     &.correct {
-        background-color: $state-success-text;
+        background-color: $success;
     }
     &.partiallycorrect {
-        background-color: $state-warning-text;
+        background-color: $warning;
     }
     &.notanswered,
     &.incorrect {
-        background-color: $state-danger-text;
+        background-color: $danger;
     }
 }
 
diff --git a/theme/boost/scss/moodle/tool_usertours.scss b/theme/boost/scss/moodle/tool_usertours.scss
index eebf19c8345..50e56eb5e4f 100644
--- a/theme/boost/scss/moodle/tool_usertours.scss
+++ b/theme/boost/scss/moodle/tool_usertours.scss
@@ -46,7 +46,7 @@ span[data-flexitour="container"] {
     }
 
     div[data-role="arrow"] {
-        border-width: #{$popover-arrow-outer-width};
+        border-width: $popover-arrow-width;
     }
 
     div[data-role="arrow"],
@@ -87,9 +87,9 @@ span[data-flexitour="container"] {
         &[x-placement="#{$direction}-start"] {
             margin-#{$opposite}: #{$popover-arrow-width};
             div[data-role="arrow"] {
-                #{$opposite}: -#{$popover-arrow-outer-width};
+                #{$opposite}: -$popover-arrow-width;
                 #{$side}: 50%;
-                margin-#{$side}: -#{$popover-arrow-outer-width};
+                margin-#{$side}: -$popover-arrow-width;
                 border-#{$opposite}-width: 0;
                 border-#{$direction}-color: #{$popover-arrow-outer-color};
             }
diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss
new file mode 100644
index 00000000000..9b733cf2f4c
--- /dev/null
+++ b/theme/boost/scss/moodle/variables.scss
@@ -0,0 +1,20 @@
+/**
+ * Moodle variables
+ *
+ * Variables written for Moodle specific components
+ *
+ * Please do not override any Bootstrap variables here, custom Bootstrap variable should go in
+ * preset files instead.
+ */
+
+$state-success-bg: theme-color-level("success", -10) !default;
+$state-success-border: theme-color-level("success", -9) !default;
+
+$state-info-bg: theme-color-level("info", -10) !default;
+$state-info-border: theme-color-level("info", -9) !default;
+
+$state-warning-bg: theme-color-level("warning", -10) !default;
+$state-warning-border: theme-color-level("warning", -10) !default;
+
+$state-danger-bg: theme-color-level("danger", -10) !default;
+$state-danger-border: theme-color-level("danger", -9) !default;
\ No newline at end of file
diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
index 280f1920f34..bd0cf669cfc 100644
--- a/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@ -82,6 +82,17 @@ $theme-colors: map-merge((
 ), $theme-colors);
 // stylelint-enable
 
+$spacer: 1rem !default;
+$spacers: (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.5),
+    5: ($spacer * 2),
+    6: ($spacer * 3)
+) !default;
+
 // Import FontAwesome.
 @import "fontawesome";
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 6420d420244..cbdfb38144d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -7879,22 +7879,41 @@ button.bg-dark:focus {
   margin-left: 1.5rem !important; }
 
 .m-5 {
-  margin: 3rem !important; }
+  margin: 2rem !important; }
 
 .mt-5,
 .my-5 {
-  margin-top: 3rem !important; }
+  margin-top: 2rem !important; }
 
 .mr-5,
 .mx-5 {
-  margin-right: 3rem !important; }
+  margin-right: 2rem !important; }
 
 .mb-5,
 .my-5 {
-  margin-bottom: 3rem !important; }
+  margin-bottom: 2rem !important; }
 
 .ml-5,
 .mx-5 {
+  margin-left: 2rem !important; }
+
+.m-6 {
+  margin: 3rem !important; }
+
+.mt-6,
+.my-6 {
+  margin-top: 3rem !important; }
+
+.mr-6,
+.mx-6 {
+  margin-right: 3rem !important; }
+
+.mb-6,
+.my-6 {
+  margin-bottom: 3rem !important; }
+
+.ml-6,
+.mx-6 {
   margin-left: 3rem !important; }
 
 .p-0 {
@@ -7993,22 +8012,41 @@ button.bg-dark:focus {
   padding-left: 1.5rem !important; }
 
 .p-5 {
-  padding: 3rem !important; }
+  padding: 2rem !important; }
 
 .pt-5,
 .py-5 {
-  padding-top: 3rem !important; }
+  padding-top: 2rem !important; }
 
 .pr-5,
 .px-5 {
-  padding-right: 3rem !important; }
+  padding-right: 2rem !important; }
 
 .pb-5,
 .py-5 {
-  padding-bottom: 3rem !important; }
+  padding-bottom: 2rem !important; }
 
 .pl-5,
 .px-5 {
+  padding-left: 2rem !important; }
+
+.p-6 {
+  padding: 3rem !important; }
+
+.pt-6,
+.py-6 {
+  padding-top: 3rem !important; }
+
+.pr-6,
+.px-6 {
+  padding-right: 3rem !important; }
+
+.pb-6,
+.py-6 {
+  padding-bottom: 3rem !important; }
+
+.pl-6,
+.px-6 {
   padding-left: 3rem !important; }
 
 .m-n1 {
@@ -8088,22 +8126,41 @@ button.bg-dark:focus {
   margin-left: -1.5rem !important; }
 
 .m-n5 {
-  margin: -3rem !important; }
+  margin: -2rem !important; }
 
 .mt-n5,
 .my-n5 {
-  margin-top: -3rem !important; }
+  margin-top: -2rem !important; }
 
 .mr-n5,
 .mx-n5 {
-  margin-right: -3rem !important; }
+  margin-right: -2rem !important; }
 
 .mb-n5,
 .my-n5 {
-  margin-bottom: -3rem !important; }
+  margin-bottom: -2rem !important; }
 
 .ml-n5,
 .mx-n5 {
+  margin-left: -2rem !important; }
+
+.m-n6 {
+  margin: -3rem !important; }
+
+.mt-n6,
+.my-n6 {
+  margin-top: -3rem !important; }
+
+.mr-n6,
+.mx-n6 {
+  margin-right: -3rem !important; }
+
+.mb-n6,
+.my-n6 {
+  margin-bottom: -3rem !important; }
+
+.ml-n6,
+.mx-n6 {
   margin-left: -3rem !important; }
 
 .m-auto {
@@ -8197,18 +8254,32 @@ button.bg-dark:focus {
   .mx-sm-4 {
     margin-left: 1.5rem !important; }
   .m-sm-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-sm-5,
   .my-sm-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-sm-5,
   .mx-sm-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-sm-5,
   .my-sm-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-sm-5,
   .mx-sm-5 {
+    margin-left: 2rem !important; }
+  .m-sm-6 {
+    margin: 3rem !important; }
+  .mt-sm-6,
+  .my-sm-6 {
+    margin-top: 3rem !important; }
+  .mr-sm-6,
+  .mx-sm-6 {
+    margin-right: 3rem !important; }
+  .mb-sm-6,
+  .my-sm-6 {
+    margin-bottom: 3rem !important; }
+  .ml-sm-6,
+  .mx-sm-6 {
     margin-left: 3rem !important; }
   .p-sm-0 {
     padding: 0 !important; }
@@ -8281,18 +8352,32 @@ button.bg-dark:focus {
   .px-sm-4 {
     padding-left: 1.5rem !important; }
   .p-sm-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-sm-5,
   .py-sm-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-sm-5,
   .px-sm-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-sm-5,
   .py-sm-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-sm-5,
   .px-sm-5 {
+    padding-left: 2rem !important; }
+  .p-sm-6 {
+    padding: 3rem !important; }
+  .pt-sm-6,
+  .py-sm-6 {
+    padding-top: 3rem !important; }
+  .pr-sm-6,
+  .px-sm-6 {
+    padding-right: 3rem !important; }
+  .pb-sm-6,
+  .py-sm-6 {
+    padding-bottom: 3rem !important; }
+  .pl-sm-6,
+  .px-sm-6 {
     padding-left: 3rem !important; }
   .m-sm-n1 {
     margin: -0.25rem !important; }
@@ -8351,18 +8436,32 @@ button.bg-dark:focus {
   .mx-sm-n4 {
     margin-left: -1.5rem !important; }
   .m-sm-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-sm-n5,
   .my-sm-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-sm-n5,
   .mx-sm-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-sm-n5,
   .my-sm-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-sm-n5,
   .mx-sm-n5 {
+    margin-left: -2rem !important; }
+  .m-sm-n6 {
+    margin: -3rem !important; }
+  .mt-sm-n6,
+  .my-sm-n6 {
+    margin-top: -3rem !important; }
+  .mr-sm-n6,
+  .mx-sm-n6 {
+    margin-right: -3rem !important; }
+  .mb-sm-n6,
+  .my-sm-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-sm-n6,
+  .mx-sm-n6 {
     margin-left: -3rem !important; }
   .m-sm-auto {
     margin: auto !important; }
@@ -8451,18 +8550,32 @@ button.bg-dark:focus {
   .mx-md-4 {
     margin-left: 1.5rem !important; }
   .m-md-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-md-5,
   .my-md-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-md-5,
   .mx-md-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-md-5,
   .my-md-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-md-5,
   .mx-md-5 {
+    margin-left: 2rem !important; }
+  .m-md-6 {
+    margin: 3rem !important; }
+  .mt-md-6,
+  .my-md-6 {
+    margin-top: 3rem !important; }
+  .mr-md-6,
+  .mx-md-6 {
+    margin-right: 3rem !important; }
+  .mb-md-6,
+  .my-md-6 {
+    margin-bottom: 3rem !important; }
+  .ml-md-6,
+  .mx-md-6 {
     margin-left: 3rem !important; }
   .p-md-0 {
     padding: 0 !important; }
@@ -8535,18 +8648,32 @@ button.bg-dark:focus {
   .px-md-4 {
     padding-left: 1.5rem !important; }
   .p-md-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-md-5,
   .py-md-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-md-5,
   .px-md-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-md-5,
   .py-md-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-md-5,
   .px-md-5 {
+    padding-left: 2rem !important; }
+  .p-md-6 {
+    padding: 3rem !important; }
+  .pt-md-6,
+  .py-md-6 {
+    padding-top: 3rem !important; }
+  .pr-md-6,
+  .px-md-6 {
+    padding-right: 3rem !important; }
+  .pb-md-6,
+  .py-md-6 {
+    padding-bottom: 3rem !important; }
+  .pl-md-6,
+  .px-md-6 {
     padding-left: 3rem !important; }
   .m-md-n1 {
     margin: -0.25rem !important; }
@@ -8605,18 +8732,32 @@ button.bg-dark:focus {
   .mx-md-n4 {
     margin-left: -1.5rem !important; }
   .m-md-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-md-n5,
   .my-md-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-md-n5,
   .mx-md-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-md-n5,
   .my-md-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-md-n5,
   .mx-md-n5 {
+    margin-left: -2rem !important; }
+  .m-md-n6 {
+    margin: -3rem !important; }
+  .mt-md-n6,
+  .my-md-n6 {
+    margin-top: -3rem !important; }
+  .mr-md-n6,
+  .mx-md-n6 {
+    margin-right: -3rem !important; }
+  .mb-md-n6,
+  .my-md-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-md-n6,
+  .mx-md-n6 {
     margin-left: -3rem !important; }
   .m-md-auto {
     margin: auto !important; }
@@ -8705,18 +8846,32 @@ button.bg-dark:focus {
   .mx-lg-4 {
     margin-left: 1.5rem !important; }
   .m-lg-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-lg-5,
   .my-lg-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-lg-5,
   .mx-lg-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-lg-5,
   .my-lg-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-lg-5,
   .mx-lg-5 {
+    margin-left: 2rem !important; }
+  .m-lg-6 {
+    margin: 3rem !important; }
+  .mt-lg-6,
+  .my-lg-6 {
+    margin-top: 3rem !important; }
+  .mr-lg-6,
+  .mx-lg-6 {
+    margin-right: 3rem !important; }
+  .mb-lg-6,
+  .my-lg-6 {
+    margin-bottom: 3rem !important; }
+  .ml-lg-6,
+  .mx-lg-6 {
     margin-left: 3rem !important; }
   .p-lg-0 {
     padding: 0 !important; }
@@ -8789,18 +8944,32 @@ button.bg-dark:focus {
   .px-lg-4 {
     padding-left: 1.5rem !important; }
   .p-lg-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-lg-5,
   .py-lg-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-lg-5,
   .px-lg-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-lg-5,
   .py-lg-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-lg-5,
   .px-lg-5 {
+    padding-left: 2rem !important; }
+  .p-lg-6 {
+    padding: 3rem !important; }
+  .pt-lg-6,
+  .py-lg-6 {
+    padding-top: 3rem !important; }
+  .pr-lg-6,
+  .px-lg-6 {
+    padding-right: 3rem !important; }
+  .pb-lg-6,
+  .py-lg-6 {
+    padding-bottom: 3rem !important; }
+  .pl-lg-6,
+  .px-lg-6 {
     padding-left: 3rem !important; }
   .m-lg-n1 {
     margin: -0.25rem !important; }
@@ -8859,18 +9028,32 @@ button.bg-dark:focus {
   .mx-lg-n4 {
     margin-left: -1.5rem !important; }
   .m-lg-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-lg-n5,
   .my-lg-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-lg-n5,
   .mx-lg-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-lg-n5,
   .my-lg-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-lg-n5,
   .mx-lg-n5 {
+    margin-left: -2rem !important; }
+  .m-lg-n6 {
+    margin: -3rem !important; }
+  .mt-lg-n6,
+  .my-lg-n6 {
+    margin-top: -3rem !important; }
+  .mr-lg-n6,
+  .mx-lg-n6 {
+    margin-right: -3rem !important; }
+  .mb-lg-n6,
+  .my-lg-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-lg-n6,
+  .mx-lg-n6 {
     margin-left: -3rem !important; }
   .m-lg-auto {
     margin: auto !important; }
@@ -8959,18 +9142,32 @@ button.bg-dark:focus {
   .mx-xl-4 {
     margin-left: 1.5rem !important; }
   .m-xl-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-xl-5,
   .my-xl-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-xl-5,
   .mx-xl-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-xl-5,
   .my-xl-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-xl-5,
   .mx-xl-5 {
+    margin-left: 2rem !important; }
+  .m-xl-6 {
+    margin: 3rem !important; }
+  .mt-xl-6,
+  .my-xl-6 {
+    margin-top: 3rem !important; }
+  .mr-xl-6,
+  .mx-xl-6 {
+    margin-right: 3rem !important; }
+  .mb-xl-6,
+  .my-xl-6 {
+    margin-bottom: 3rem !important; }
+  .ml-xl-6,
+  .mx-xl-6 {
     margin-left: 3rem !important; }
   .p-xl-0 {
     padding: 0 !important; }
@@ -9043,18 +9240,32 @@ button.bg-dark:focus {
   .px-xl-4 {
     padding-left: 1.5rem !important; }
   .p-xl-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-xl-5,
   .py-xl-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-xl-5,
   .px-xl-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-xl-5,
   .py-xl-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-xl-5,
   .px-xl-5 {
+    padding-left: 2rem !important; }
+  .p-xl-6 {
+    padding: 3rem !important; }
+  .pt-xl-6,
+  .py-xl-6 {
+    padding-top: 3rem !important; }
+  .pr-xl-6,
+  .px-xl-6 {
+    padding-right: 3rem !important; }
+  .pb-xl-6,
+  .py-xl-6 {
+    padding-bottom: 3rem !important; }
+  .pl-xl-6,
+  .px-xl-6 {
     padding-left: 3rem !important; }
   .m-xl-n1 {
     margin: -0.25rem !important; }
@@ -9113,18 +9324,32 @@ button.bg-dark:focus {
   .mx-xl-n4 {
     margin-left: -1.5rem !important; }
   .m-xl-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-xl-n5,
   .my-xl-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-xl-n5,
   .mx-xl-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-xl-n5,
   .my-xl-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-xl-n5,
   .mx-xl-n5 {
+    margin-left: -2rem !important; }
+  .m-xl-n6 {
+    margin: -3rem !important; }
+  .mt-xl-n6,
+  .my-xl-n6 {
+    margin-top: -3rem !important; }
+  .mr-xl-n6,
+  .mx-xl-n6 {
+    margin-right: -3rem !important; }
+  .mb-xl-n6,
+  .my-xl-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-xl-n6,
+  .mx-xl-n6 {
     margin-left: -3rem !important; }
   .m-xl-auto {
     margin: auto !important; }
@@ -9378,236 +9603,6 @@ a.text-dark:hover, a.text-dark:focus {
     color: inherit;
     border-color: #dee2e6; } }
 
-/* stylelint-disable function-url-scheme-blacklist */
-/* stylelint-enable function-url-scheme-blacklist */
-.tag {
-  display: inline-block;
-  padding: 0.25rem 0.4em;
-  font-size: 75%;
-  font-weight: bold;
-  line-height: 1;
-  color: #fff;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline; }
-  .tag:empty {
-    display: none; }
-
-.form-control-success,
-.form-control-warning,
-.form-control-danger {
-  padding-right: 2.25rem;
-  background-repeat: no-repeat;
-  background-position: center right calc(1.5em + 0.75rem + 2px)/4;
-  background-size: calc(1.5em + 0.75rem + 2px)/2 calc(1.5em + 0.75rem + 2px)/2; }
-
-.tag-default {
-  background-color: #6c757d; }
-  .tag-default[href]:hover, .tag-default[href]:focus {
-    background-color: #545b62; }
-
-.tag-primary {
-  background-color: #1177d1; }
-  .tag-primary[href]:hover, .tag-primary[href]:focus {
-    background-color: #0d5ca2; }
-
-.tag-success {
-  background-color: #398439; }
-  .tag-success[href]:hover, .tag-success[href]:focus {
-    background-color: #2a602a; }
-
-.tag-info {
-  background-color: #5bc0de; }
-  .tag-info[href]:hover, .tag-info[href]:focus {
-    background-color: #31b0d5; }
-
-.tag-warning {
-  background-color: #f0ad4e; }
-  .tag-warning[href]:hover, .tag-warning[href]:focus {
-    background-color: #ec971f; }
-
-.tag-danger {
-  background-color: #d43f3a; }
-  .tag-danger[href]:hover, .tag-danger[href]:focus {
-    background-color: #b42c27; }
-
-.custom-select {
-  width: auto; }
-
-.fade.in {
-  opacity: 1; }
-
-.m-a-0 {
-  margin: 0 !important; }
-
-.m-t-0,
-.m-y-0 {
-  margin-top: 0 !important; }
-
-.m-r-0,
-.m-x-0 {
-  margin-right: 0 !important; }
-
-.m-b-0,
-.m-y-0 {
-  margin-bottom: 0 !important; }
-
-.m-l-0,
-.m-x-0 {
-  margin-left: 0 !important; }
-
-.m-a-1 {
-  margin: 1rem !important; }
-
-.m-t-1,
-.m-y-1 {
-  margin-top: 1rem !important; }
-
-.m-r-1,
-.m-x-1 {
-  margin-right: 1rem !important; }
-
-.m-b-1,
-.m-y-1 {
-  margin-bottom: 1rem !important; }
-
-.m-l-1,
-.m-x-1 {
-  margin-left: 1rem !important; }
-
-.m-a-2 {
-  margin: 2rem !important; }
-
-.m-t-2,
-.m-y-2 {
-  margin-top: 2rem !important; }
-
-.m-r-2,
-.m-x-2 {
-  margin-right: 2rem !important; }
-
-.m-b-2,
-.m-y-2 {
-  margin-bottom: 2rem !important; }
-
-.m-l-2,
-.m-x-2 {
-  margin-left: 2rem !important; }
-
-.m-a-3 {
-  margin: 3rem !important; }
-
-.m-t-3,
-.m-y-3 {
-  margin-top: 3rem !important; }
-
-.m-r-3,
-.m-x-3 {
-  margin-right: 3rem !important; }
-
-.m-b-3,
-.m-y-3 {
-  margin-bottom: 3rem !important; }
-
-.m-l-3,
-.m-x-3 {
-  margin-left: 3rem !important; }
-
-.p-a-0 {
-  padding: 0 !important; }
-
-.p-t-0,
-.p-y-0 {
-  padding-top: 0 !important; }
-
-.p-r-0,
-.p-x-0 {
-  padding-right: 0 !important; }
-
-.p-b-0,
-.p-y-0 {
-  padding-bottom: 0 !important; }
-
-.p-l-0,
-.p-x-0 {
-  padding-left: 0 !important; }
-
-.p-a-1 {
-  padding: 1rem !important; }
-
-.p-t-1,
-.p-y-1 {
-  padding-top: 1rem !important; }
-
-.p-r-1,
-.p-x-1 {
-  padding-right: 1rem !important; }
-
-.p-b-1,
-.p-y-1 {
-  padding-bottom: 1rem !important; }
-
-.p-l-1,
-.p-x-1 {
-  padding-left: 1rem !important; }
-
-.p-a-2 {
-  padding: 2rem !important; }
-
-.p-t-2,
-.p-y-2 {
-  padding-top: 2rem !important; }
-
-.p-r-2,
-.p-x-2 {
-  padding-right: 2rem !important; }
-
-.p-b-2,
-.p-y-2 {
-  padding-bottom: 2rem !important; }
-
-.p-l-2,
-.p-x-2 {
-  padding-left: 2rem !important; }
-
-.p-a-3 {
-  padding: 3rem !important; }
-
-.p-t-3,
-.p-y-3 {
-  padding-top: 3rem !important; }
-
-.p-r-3,
-.p-x-3 {
-  padding-right: 3rem !important; }
-
-.p-b-3,
-.p-y-3 {
-  padding-bottom: 3rem !important; }
-
-.p-l-3,
-.p-x-3 {
-  padding-left: 3rem !important; }
-
-input[disabled] {
-  cursor: not-allowed; }
-
-.row-fluid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px; }
-
-/*rtl:raw:
-.dropdown-menu-right {
-    right: 0;
-    left: auto;
-}
-.dropdown-menu-left {
-    right: auto;
-    left: 0;
-}
-*/
 /**
  * Bootstrap overrides for RTL
  *
@@ -9630,6 +9625,14 @@ input[disabled] {
     text-align: right;
 }
 */
+/**
+ * Moodle variables
+ *
+ * Variables written for Moodle specific components
+ *
+ * Please do not override any Bootstrap variables here, custom Bootstrap variable should go in
+ * preset files instead.
+ */
 /* core.less */
 #region-main {
   overflow-x: auto;
@@ -11597,6 +11600,10 @@ div.editor_atto_toolbar button .icon {
   /* stylelint-disable-line declaration-no-important */ }
 
 .line-height-5 {
+  line-height: 2rem !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.line-height-6 {
   line-height: 3rem !important;
   /* stylelint-disable-line declaration-no-important */ }
 
@@ -11654,6 +11661,19 @@ body.h5p-embed .h5pmessages {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.img-responsive {
+  max-width: 100%;
+  height: auto; }
+
+input[disabled] {
+  cursor: not-allowed; }
+
+.custom-select {
+  width: auto; }
+
+.fade.in {
+  opacity: 1; }
+
 .clamp-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -16513,6 +16533,8 @@ textarea[data-auto-rows] {
 
 /** Atto fields do not have form-control because that would break the layout of the editor.
     So they need these extra styles to highlight the editor when there is a validation error. */
+/* stylelint-disable function-url-scheme-blacklist */
+/* stylelint-enable function-url-scheme-blacklist */
 .has-danger .editor_atto_content.form-control,
 .has-danger .editor_atto_content.form-control-danger {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
@@ -16520,28 +16542,6 @@ textarea[data-auto-rows] {
   background-repeat: no-repeat;
   background-position: center right 1rem;
   background-size: 1.5rem; }
-  .has-danger .editor_atto_content.form-control .form-control-feedback,
-  .has-danger .editor_atto_content.form-control .form-control-label,
-  .has-danger .editor_atto_content.form-control .form-check-label,
-  .has-danger .editor_atto_content.form-control .form-check-inline,
-  .has-danger .editor_atto_content.form-control .custom-control,
-  .has-danger .editor_atto_content.form-control-danger .form-control-feedback,
-  .has-danger .editor_atto_content.form-control-danger .form-control-label,
-  .has-danger .editor_atto_content.form-control-danger .form-check-label,
-  .has-danger .editor_atto_content.form-control-danger .form-check-inline,
-  .has-danger .editor_atto_content.form-control-danger .custom-control {
-    color: #d43f3a; }
-  .has-danger .editor_atto_content.form-control .form-control,
-  .has-danger .editor_atto_content.form-control-danger .form-control {
-    border-color: #d43f3a; }
-  .has-danger .editor_atto_content.form-control .input-group-addon,
-  .has-danger .editor_atto_content.form-control-danger .input-group-addon {
-    color: #d43f3a;
-    border-color: #d43f3a;
-    background-color: #f9e2e1; }
-  .has-danger .editor_atto_content.form-control .form-control-feedback,
-  .has-danger .editor_atto_content.form-control-danger .form-control-feedback {
-    color: #d43f3a; }
 
 [data-filetypesbrowserbody] [aria-expanded="false"] > [role="group"],
 [data-filetypesbrowserbody] [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
@@ -17257,9 +17257,6 @@ select {
   float: left;
   margin-left: 4px; }
 
-.ie .row-fluid .desktop-first-column {
-  margin-left: 0; }
-
 .langmenu form {
   margin: 0; }
 
@@ -18946,7 +18943,7 @@ span[data-flexitour="container"] .modal-dialog {
   margin: 0; }
 
 span[data-flexitour="container"] div[data-role="arrow"] {
-  border-width: 11px; }
+  border-width: 1rem; }
 
 span[data-flexitour="container"] div[data-role="arrow"],
 span[data-flexitour="container"] div[data-role="arrow"]:after {
@@ -18961,9 +18958,9 @@ span[data-flexitour="container"] div[data-role="arrow"]:after {
 span[data-flexitour="container"][x-placement="top"], span[data-flexitour="container"][x-placement="top-start"] {
   margin-bottom: 1rem; }
   span[data-flexitour="container"][x-placement="top"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"] {
-    bottom: -11px;
+    bottom: -1rem;
     left: 50%;
-    margin-left: -11px;
+    margin-left: -1rem;
     border-bottom-width: 0;
     border-top-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="top"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"]:after {
@@ -18976,9 +18973,9 @@ span[data-flexitour="container"][x-placement="top"], span[data-flexitour="contai
 span[data-flexitour="container"][x-placement="bottom"], span[data-flexitour="container"][x-placement="bottom-start"] {
   margin-top: 1rem; }
   span[data-flexitour="container"][x-placement="bottom"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"] {
-    top: -11px;
+    top: -1rem;
     left: 50%;
-    margin-left: -11px;
+    margin-left: -1rem;
     border-top-width: 0;
     border-bottom-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="bottom"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"]:after {
@@ -18991,9 +18988,9 @@ span[data-flexitour="container"][x-placement="bottom"], span[data-flexitour="con
 span[data-flexitour="container"][x-placement="left"], span[data-flexitour="container"][x-placement="left-start"] {
   margin-right: 1rem; }
   span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"] {
-    right: -11px;
+    right: -1rem;
     top: 50%;
-    margin-top: -11px;
+    margin-top: -1rem;
     border-right-width: 0;
     border-left-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"]:after {
@@ -19006,9 +19003,9 @@ span[data-flexitour="container"][x-placement="left"], span[data-flexitour="conta
 span[data-flexitour="container"][x-placement="right"], span[data-flexitour="container"][x-placement="right-start"] {
   margin-left: 1rem; }
   span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"] {
-    left: -11px;
+    left: -1rem;
     top: 50%;
-    margin-top: -11px;
+    margin-top: -1rem;
     border-left-width: 0;
     border-right-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"]:after {
@@ -19023,113 +19020,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   margin-left: -15px;
   width: 275px; }
 
-.well {
-  border: 1px solid #dee2e6;
-  padding: 1.25rem; }
-
-.img-responsive {
-  max-width: 100%;
-  height: auto; }
-
-.text-error {
-  color: #d43f3a; }
-
-.btn-default {
-  color: #212529;
-  background-color: #ced4da;
-  border-color: #ced4da; }
-  .btn-default:hover {
-    color: #212529;
-    background-color: #b8c1ca;
-    border-color: #b1bbc4; }
-  .btn-default:focus, .btn-default.focus {
-    color: #212529;
-    background-color: #b8c1ca;
-    border-color: #b1bbc4;
-    box-shadow: 0 0 0 0.2rem rgba(180, 186, 191, 0.5); }
-  .btn-default.disabled, .btn-default:disabled {
-    color: #212529;
-    background-color: #ced4da;
-    border-color: #ced4da; }
-  .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
-  .show > .btn-default.dropdown-toggle {
-    color: #212529;
-    background-color: #b1bbc4;
-    border-color: #aab4bf; }
-    .btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus,
-    .show > .btn-default.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(180, 186, 191, 0.5); }
-
-.label {
-  display: inline-block;
-  padding: 0.25em 0.4em;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  color: #fff;
-  background-color: #6c757d; }
-  @media (prefers-reduced-motion: reduce) {
-    .label {
-      transition: none; } }
-  a.label:hover, a.label:focus {
-    color: #fff;
-    background-color: #545b62; }
-  a.label:focus, a.label.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
-
-.label-success {
-  color: #fff;
-  background-color: #398439; }
-  a.label-success:hover, a.label-success:focus {
-    color: #fff;
-    background-color: #2a602a; }
-  a.label-success:focus, a.label-success.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(57, 132, 57, 0.5); }
-
-.label-info {
-  color: #212529;
-  background-color: #5bc0de; }
-  a.label-info:hover, a.label-info:focus {
-    color: #212529;
-    background-color: #31b0d5; }
-  a.label-info:focus, a.label-info.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.5); }
-
-.label-warning {
-  color: #212529;
-  background-color: #f0ad4e; }
-  a.label-warning:hover, a.label-warning:focus {
-    color: #212529;
-    background-color: #ec971f; }
-  a.label-warning:focus, a.label-warning.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5); }
-
-.label-important {
-  color: #fff;
-  background-color: #d43f3a; }
-  a.label-important:hover, a.label-important:focus {
-    color: #fff;
-    background-color: #b42c27; }
-  a.label-important:focus, a.label-important.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(212, 63, 58, 0.5); }
-
-.pull-left {
-  float: left !important;
-  /* stylelint-disable-line declaration-no-important */ }
-
-.pull-right {
-  float: right !important;
-  /* stylelint-disable-line declaration-no-important */ }
-
 @media print {
   body.drawer-open-left.jsenabled,
   body.drawer-open-right.jsenabled {
diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss
index c5f2517f75f..c5a370d64ab 100644
--- a/theme/classic/scss/preset/default.scss
+++ b/theme/classic/scss/preset/default.scss
@@ -76,6 +76,17 @@ $theme-colors: map-merge((
 ), $theme-colors);
 // stylelint-enable
 
+$spacer: 1rem !default;
+$spacers: (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.5),
+    5: ($spacer * 2),
+    6: ($spacer * 3)
+) !default;
+
 // Import FontAwesome.
 @import "fontawesome";
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index b64067e1eac..d673dfc990c 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -8082,22 +8082,41 @@ button.bg-dark:focus {
   margin-left: 1.5rem !important; }
 
 .m-5 {
-  margin: 3rem !important; }
+  margin: 2rem !important; }
 
 .mt-5,
 .my-5 {
-  margin-top: 3rem !important; }
+  margin-top: 2rem !important; }
 
 .mr-5,
 .mx-5 {
-  margin-right: 3rem !important; }
+  margin-right: 2rem !important; }
 
 .mb-5,
 .my-5 {
-  margin-bottom: 3rem !important; }
+  margin-bottom: 2rem !important; }
 
 .ml-5,
 .mx-5 {
+  margin-left: 2rem !important; }
+
+.m-6 {
+  margin: 3rem !important; }
+
+.mt-6,
+.my-6 {
+  margin-top: 3rem !important; }
+
+.mr-6,
+.mx-6 {
+  margin-right: 3rem !important; }
+
+.mb-6,
+.my-6 {
+  margin-bottom: 3rem !important; }
+
+.ml-6,
+.mx-6 {
   margin-left: 3rem !important; }
 
 .p-0 {
@@ -8196,22 +8215,41 @@ button.bg-dark:focus {
   padding-left: 1.5rem !important; }
 
 .p-5 {
-  padding: 3rem !important; }
+  padding: 2rem !important; }
 
 .pt-5,
 .py-5 {
-  padding-top: 3rem !important; }
+  padding-top: 2rem !important; }
 
 .pr-5,
 .px-5 {
-  padding-right: 3rem !important; }
+  padding-right: 2rem !important; }
 
 .pb-5,
 .py-5 {
-  padding-bottom: 3rem !important; }
+  padding-bottom: 2rem !important; }
 
 .pl-5,
 .px-5 {
+  padding-left: 2rem !important; }
+
+.p-6 {
+  padding: 3rem !important; }
+
+.pt-6,
+.py-6 {
+  padding-top: 3rem !important; }
+
+.pr-6,
+.px-6 {
+  padding-right: 3rem !important; }
+
+.pb-6,
+.py-6 {
+  padding-bottom: 3rem !important; }
+
+.pl-6,
+.px-6 {
   padding-left: 3rem !important; }
 
 .m-n1 {
@@ -8291,22 +8329,41 @@ button.bg-dark:focus {
   margin-left: -1.5rem !important; }
 
 .m-n5 {
-  margin: -3rem !important; }
+  margin: -2rem !important; }
 
 .mt-n5,
 .my-n5 {
-  margin-top: -3rem !important; }
+  margin-top: -2rem !important; }
 
 .mr-n5,
 .mx-n5 {
-  margin-right: -3rem !important; }
+  margin-right: -2rem !important; }
 
 .mb-n5,
 .my-n5 {
-  margin-bottom: -3rem !important; }
+  margin-bottom: -2rem !important; }
 
 .ml-n5,
 .mx-n5 {
+  margin-left: -2rem !important; }
+
+.m-n6 {
+  margin: -3rem !important; }
+
+.mt-n6,
+.my-n6 {
+  margin-top: -3rem !important; }
+
+.mr-n6,
+.mx-n6 {
+  margin-right: -3rem !important; }
+
+.mb-n6,
+.my-n6 {
+  margin-bottom: -3rem !important; }
+
+.ml-n6,
+.mx-n6 {
   margin-left: -3rem !important; }
 
 .m-auto {
@@ -8400,18 +8457,32 @@ button.bg-dark:focus {
   .mx-sm-4 {
     margin-left: 1.5rem !important; }
   .m-sm-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-sm-5,
   .my-sm-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-sm-5,
   .mx-sm-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-sm-5,
   .my-sm-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-sm-5,
   .mx-sm-5 {
+    margin-left: 2rem !important; }
+  .m-sm-6 {
+    margin: 3rem !important; }
+  .mt-sm-6,
+  .my-sm-6 {
+    margin-top: 3rem !important; }
+  .mr-sm-6,
+  .mx-sm-6 {
+    margin-right: 3rem !important; }
+  .mb-sm-6,
+  .my-sm-6 {
+    margin-bottom: 3rem !important; }
+  .ml-sm-6,
+  .mx-sm-6 {
     margin-left: 3rem !important; }
   .p-sm-0 {
     padding: 0 !important; }
@@ -8484,18 +8555,32 @@ button.bg-dark:focus {
   .px-sm-4 {
     padding-left: 1.5rem !important; }
   .p-sm-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-sm-5,
   .py-sm-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-sm-5,
   .px-sm-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-sm-5,
   .py-sm-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-sm-5,
   .px-sm-5 {
+    padding-left: 2rem !important; }
+  .p-sm-6 {
+    padding: 3rem !important; }
+  .pt-sm-6,
+  .py-sm-6 {
+    padding-top: 3rem !important; }
+  .pr-sm-6,
+  .px-sm-6 {
+    padding-right: 3rem !important; }
+  .pb-sm-6,
+  .py-sm-6 {
+    padding-bottom: 3rem !important; }
+  .pl-sm-6,
+  .px-sm-6 {
     padding-left: 3rem !important; }
   .m-sm-n1 {
     margin: -0.25rem !important; }
@@ -8554,18 +8639,32 @@ button.bg-dark:focus {
   .mx-sm-n4 {
     margin-left: -1.5rem !important; }
   .m-sm-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-sm-n5,
   .my-sm-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-sm-n5,
   .mx-sm-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-sm-n5,
   .my-sm-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-sm-n5,
   .mx-sm-n5 {
+    margin-left: -2rem !important; }
+  .m-sm-n6 {
+    margin: -3rem !important; }
+  .mt-sm-n6,
+  .my-sm-n6 {
+    margin-top: -3rem !important; }
+  .mr-sm-n6,
+  .mx-sm-n6 {
+    margin-right: -3rem !important; }
+  .mb-sm-n6,
+  .my-sm-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-sm-n6,
+  .mx-sm-n6 {
     margin-left: -3rem !important; }
   .m-sm-auto {
     margin: auto !important; }
@@ -8654,18 +8753,32 @@ button.bg-dark:focus {
   .mx-md-4 {
     margin-left: 1.5rem !important; }
   .m-md-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-md-5,
   .my-md-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-md-5,
   .mx-md-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-md-5,
   .my-md-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-md-5,
   .mx-md-5 {
+    margin-left: 2rem !important; }
+  .m-md-6 {
+    margin: 3rem !important; }
+  .mt-md-6,
+  .my-md-6 {
+    margin-top: 3rem !important; }
+  .mr-md-6,
+  .mx-md-6 {
+    margin-right: 3rem !important; }
+  .mb-md-6,
+  .my-md-6 {
+    margin-bottom: 3rem !important; }
+  .ml-md-6,
+  .mx-md-6 {
     margin-left: 3rem !important; }
   .p-md-0 {
     padding: 0 !important; }
@@ -8738,18 +8851,32 @@ button.bg-dark:focus {
   .px-md-4 {
     padding-left: 1.5rem !important; }
   .p-md-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-md-5,
   .py-md-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-md-5,
   .px-md-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-md-5,
   .py-md-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-md-5,
   .px-md-5 {
+    padding-left: 2rem !important; }
+  .p-md-6 {
+    padding: 3rem !important; }
+  .pt-md-6,
+  .py-md-6 {
+    padding-top: 3rem !important; }
+  .pr-md-6,
+  .px-md-6 {
+    padding-right: 3rem !important; }
+  .pb-md-6,
+  .py-md-6 {
+    padding-bottom: 3rem !important; }
+  .pl-md-6,
+  .px-md-6 {
     padding-left: 3rem !important; }
   .m-md-n1 {
     margin: -0.25rem !important; }
@@ -8808,18 +8935,32 @@ button.bg-dark:focus {
   .mx-md-n4 {
     margin-left: -1.5rem !important; }
   .m-md-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-md-n5,
   .my-md-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-md-n5,
   .mx-md-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-md-n5,
   .my-md-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-md-n5,
   .mx-md-n5 {
+    margin-left: -2rem !important; }
+  .m-md-n6 {
+    margin: -3rem !important; }
+  .mt-md-n6,
+  .my-md-n6 {
+    margin-top: -3rem !important; }
+  .mr-md-n6,
+  .mx-md-n6 {
+    margin-right: -3rem !important; }
+  .mb-md-n6,
+  .my-md-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-md-n6,
+  .mx-md-n6 {
     margin-left: -3rem !important; }
   .m-md-auto {
     margin: auto !important; }
@@ -8908,18 +9049,32 @@ button.bg-dark:focus {
   .mx-lg-4 {
     margin-left: 1.5rem !important; }
   .m-lg-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-lg-5,
   .my-lg-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-lg-5,
   .mx-lg-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-lg-5,
   .my-lg-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-lg-5,
   .mx-lg-5 {
+    margin-left: 2rem !important; }
+  .m-lg-6 {
+    margin: 3rem !important; }
+  .mt-lg-6,
+  .my-lg-6 {
+    margin-top: 3rem !important; }
+  .mr-lg-6,
+  .mx-lg-6 {
+    margin-right: 3rem !important; }
+  .mb-lg-6,
+  .my-lg-6 {
+    margin-bottom: 3rem !important; }
+  .ml-lg-6,
+  .mx-lg-6 {
     margin-left: 3rem !important; }
   .p-lg-0 {
     padding: 0 !important; }
@@ -8992,18 +9147,32 @@ button.bg-dark:focus {
   .px-lg-4 {
     padding-left: 1.5rem !important; }
   .p-lg-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-lg-5,
   .py-lg-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-lg-5,
   .px-lg-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-lg-5,
   .py-lg-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-lg-5,
   .px-lg-5 {
+    padding-left: 2rem !important; }
+  .p-lg-6 {
+    padding: 3rem !important; }
+  .pt-lg-6,
+  .py-lg-6 {
+    padding-top: 3rem !important; }
+  .pr-lg-6,
+  .px-lg-6 {
+    padding-right: 3rem !important; }
+  .pb-lg-6,
+  .py-lg-6 {
+    padding-bottom: 3rem !important; }
+  .pl-lg-6,
+  .px-lg-6 {
     padding-left: 3rem !important; }
   .m-lg-n1 {
     margin: -0.25rem !important; }
@@ -9062,18 +9231,32 @@ button.bg-dark:focus {
   .mx-lg-n4 {
     margin-left: -1.5rem !important; }
   .m-lg-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-lg-n5,
   .my-lg-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-lg-n5,
   .mx-lg-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-lg-n5,
   .my-lg-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-lg-n5,
   .mx-lg-n5 {
+    margin-left: -2rem !important; }
+  .m-lg-n6 {
+    margin: -3rem !important; }
+  .mt-lg-n6,
+  .my-lg-n6 {
+    margin-top: -3rem !important; }
+  .mr-lg-n6,
+  .mx-lg-n6 {
+    margin-right: -3rem !important; }
+  .mb-lg-n6,
+  .my-lg-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-lg-n6,
+  .mx-lg-n6 {
     margin-left: -3rem !important; }
   .m-lg-auto {
     margin: auto !important; }
@@ -9162,18 +9345,32 @@ button.bg-dark:focus {
   .mx-xl-4 {
     margin-left: 1.5rem !important; }
   .m-xl-5 {
-    margin: 3rem !important; }
+    margin: 2rem !important; }
   .mt-xl-5,
   .my-xl-5 {
-    margin-top: 3rem !important; }
+    margin-top: 2rem !important; }
   .mr-xl-5,
   .mx-xl-5 {
-    margin-right: 3rem !important; }
+    margin-right: 2rem !important; }
   .mb-xl-5,
   .my-xl-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 2rem !important; }
   .ml-xl-5,
   .mx-xl-5 {
+    margin-left: 2rem !important; }
+  .m-xl-6 {
+    margin: 3rem !important; }
+  .mt-xl-6,
+  .my-xl-6 {
+    margin-top: 3rem !important; }
+  .mr-xl-6,
+  .mx-xl-6 {
+    margin-right: 3rem !important; }
+  .mb-xl-6,
+  .my-xl-6 {
+    margin-bottom: 3rem !important; }
+  .ml-xl-6,
+  .mx-xl-6 {
     margin-left: 3rem !important; }
   .p-xl-0 {
     padding: 0 !important; }
@@ -9246,18 +9443,32 @@ button.bg-dark:focus {
   .px-xl-4 {
     padding-left: 1.5rem !important; }
   .p-xl-5 {
-    padding: 3rem !important; }
+    padding: 2rem !important; }
   .pt-xl-5,
   .py-xl-5 {
-    padding-top: 3rem !important; }
+    padding-top: 2rem !important; }
   .pr-xl-5,
   .px-xl-5 {
-    padding-right: 3rem !important; }
+    padding-right: 2rem !important; }
   .pb-xl-5,
   .py-xl-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 2rem !important; }
   .pl-xl-5,
   .px-xl-5 {
+    padding-left: 2rem !important; }
+  .p-xl-6 {
+    padding: 3rem !important; }
+  .pt-xl-6,
+  .py-xl-6 {
+    padding-top: 3rem !important; }
+  .pr-xl-6,
+  .px-xl-6 {
+    padding-right: 3rem !important; }
+  .pb-xl-6,
+  .py-xl-6 {
+    padding-bottom: 3rem !important; }
+  .pl-xl-6,
+  .px-xl-6 {
     padding-left: 3rem !important; }
   .m-xl-n1 {
     margin: -0.25rem !important; }
@@ -9316,18 +9527,32 @@ button.bg-dark:focus {
   .mx-xl-n4 {
     margin-left: -1.5rem !important; }
   .m-xl-n5 {
-    margin: -3rem !important; }
+    margin: -2rem !important; }
   .mt-xl-n5,
   .my-xl-n5 {
-    margin-top: -3rem !important; }
+    margin-top: -2rem !important; }
   .mr-xl-n5,
   .mx-xl-n5 {
-    margin-right: -3rem !important; }
+    margin-right: -2rem !important; }
   .mb-xl-n5,
   .my-xl-n5 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -2rem !important; }
   .ml-xl-n5,
   .mx-xl-n5 {
+    margin-left: -2rem !important; }
+  .m-xl-n6 {
+    margin: -3rem !important; }
+  .mt-xl-n6,
+  .my-xl-n6 {
+    margin-top: -3rem !important; }
+  .mr-xl-n6,
+  .mx-xl-n6 {
+    margin-right: -3rem !important; }
+  .mb-xl-n6,
+  .my-xl-n6 {
+    margin-bottom: -3rem !important; }
+  .ml-xl-n6,
+  .mx-xl-n6 {
     margin-left: -3rem !important; }
   .m-xl-auto {
     margin: auto !important; }
@@ -9581,237 +9806,6 @@ a.text-dark:hover, a.text-dark:focus {
     color: inherit;
     border-color: #dee2e6; } }
 
-/* stylelint-disable function-url-scheme-blacklist */
-/* stylelint-enable function-url-scheme-blacklist */
-.tag {
-  display: inline-block;
-  padding: 0.25rem 0.4em;
-  font-size: 75%;
-  font-weight: bold;
-  line-height: 1;
-  color: #fff;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 0.25rem; }
-  .tag:empty {
-    display: none; }
-
-.form-control-success,
-.form-control-warning,
-.form-control-danger {
-  padding-right: 2.25rem;
-  background-repeat: no-repeat;
-  background-position: center right calc(1.5em + 0.75rem + 2px)/4;
-  background-size: calc(1.5em + 0.75rem + 2px)/2 calc(1.5em + 0.75rem + 2px)/2; }
-
-.tag-default {
-  background-color: #6c757d; }
-  .tag-default[href]:hover, .tag-default[href]:focus {
-    background-color: #545b62; }
-
-.tag-primary {
-  background-color: #1177d1; }
-  .tag-primary[href]:hover, .tag-primary[href]:focus {
-    background-color: #0d5ca2; }
-
-.tag-success {
-  background-color: #398439; }
-  .tag-success[href]:hover, .tag-success[href]:focus {
-    background-color: #2a602a; }
-
-.tag-info {
-  background-color: #5bc0de; }
-  .tag-info[href]:hover, .tag-info[href]:focus {
-    background-color: #31b0d5; }
-
-.tag-warning {
-  background-color: #f0ad4e; }
-  .tag-warning[href]:hover, .tag-warning[href]:focus {
-    background-color: #ec971f; }
-
-.tag-danger {
-  background-color: #d43f3a; }
-  .tag-danger[href]:hover, .tag-danger[href]:focus {
-    background-color: #b42c27; }
-
-.custom-select {
-  width: auto; }
-
-.fade.in {
-  opacity: 1; }
-
-.m-a-0 {
-  margin: 0 !important; }
-
-.m-t-0,
-.m-y-0 {
-  margin-top: 0 !important; }
-
-.m-r-0,
-.m-x-0 {
-  margin-right: 0 !important; }
-
-.m-b-0,
-.m-y-0 {
-  margin-bottom: 0 !important; }
-
-.m-l-0,
-.m-x-0 {
-  margin-left: 0 !important; }
-
-.m-a-1 {
-  margin: 1rem !important; }
-
-.m-t-1,
-.m-y-1 {
-  margin-top: 1rem !important; }
-
-.m-r-1,
-.m-x-1 {
-  margin-right: 1rem !important; }
-
-.m-b-1,
-.m-y-1 {
-  margin-bottom: 1rem !important; }
-
-.m-l-1,
-.m-x-1 {
-  margin-left: 1rem !important; }
-
-.m-a-2 {
-  margin: 2rem !important; }
-
-.m-t-2,
-.m-y-2 {
-  margin-top: 2rem !important; }
-
-.m-r-2,
-.m-x-2 {
-  margin-right: 2rem !important; }
-
-.m-b-2,
-.m-y-2 {
-  margin-bottom: 2rem !important; }
-
-.m-l-2,
-.m-x-2 {
-  margin-left: 2rem !important; }
-
-.m-a-3 {
-  margin: 3rem !important; }
-
-.m-t-3,
-.m-y-3 {
-  margin-top: 3rem !important; }
-
-.m-r-3,
-.m-x-3 {
-  margin-right: 3rem !important; }
-
-.m-b-3,
-.m-y-3 {
-  margin-bottom: 3rem !important; }
-
-.m-l-3,
-.m-x-3 {
-  margin-left: 3rem !important; }
-
-.p-a-0 {
-  padding: 0 !important; }
-
-.p-t-0,
-.p-y-0 {
-  padding-top: 0 !important; }
-
-.p-r-0,
-.p-x-0 {
-  padding-right: 0 !important; }
-
-.p-b-0,
-.p-y-0 {
-  padding-bottom: 0 !important; }
-
-.p-l-0,
-.p-x-0 {
-  padding-left: 0 !important; }
-
-.p-a-1 {
-  padding: 1rem !important; }
-
-.p-t-1,
-.p-y-1 {
-  padding-top: 1rem !important; }
-
-.p-r-1,
-.p-x-1 {
-  padding-right: 1rem !important; }
-
-.p-b-1,
-.p-y-1 {
-  padding-bottom: 1rem !important; }
-
-.p-l-1,
-.p-x-1 {
-  padding-left: 1rem !important; }
-
-.p-a-2 {
-  padding: 2rem !important; }
-
-.p-t-2,
-.p-y-2 {
-  padding-top: 2rem !important; }
-
-.p-r-2,
-.p-x-2 {
-  padding-right: 2rem !important; }
-
-.p-b-2,
-.p-y-2 {
-  padding-bottom: 2rem !important; }
-
-.p-l-2,
-.p-x-2 {
-  padding-left: 2rem !important; }
-
-.p-a-3 {
-  padding: 3rem !important; }
-
-.p-t-3,
-.p-y-3 {
-  padding-top: 3rem !important; }
-
-.p-r-3,
-.p-x-3 {
-  padding-right: 3rem !important; }
-
-.p-b-3,
-.p-y-3 {
-  padding-bottom: 3rem !important; }
-
-.p-l-3,
-.p-x-3 {
-  padding-left: 3rem !important; }
-
-input[disabled] {
-  cursor: not-allowed; }
-
-.row-fluid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px; }
-
-/*rtl:raw:
-.dropdown-menu-right {
-    right: 0;
-    left: auto;
-}
-.dropdown-menu-left {
-    right: auto;
-    left: 0;
-}
-*/
 /**
  * Bootstrap overrides for RTL
  *
@@ -9834,6 +9828,14 @@ input[disabled] {
     text-align: right;
 }
 */
+/**
+ * Moodle variables
+ *
+ * Variables written for Moodle specific components
+ *
+ * Please do not override any Bootstrap variables here, custom Bootstrap variable should go in
+ * preset files instead.
+ */
 /* core.less */
 #region-main {
   overflow-x: auto;
@@ -11808,6 +11810,10 @@ div.editor_atto_toolbar button .icon {
   /* stylelint-disable-line declaration-no-important */ }
 
 .line-height-5 {
+  line-height: 2rem !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.line-height-6 {
   line-height: 3rem !important;
   /* stylelint-disable-line declaration-no-important */ }
 
@@ -11865,6 +11871,19 @@ body.h5p-embed .h5pmessages {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.img-responsive {
+  max-width: 100%;
+  height: auto; }
+
+input[disabled] {
+  cursor: not-allowed; }
+
+.custom-select {
+  width: auto; }
+
+.fade.in {
+  opacity: 1; }
+
 .clamp-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -16742,6 +16761,8 @@ textarea[data-auto-rows] {
 
 /** Atto fields do not have form-control because that would break the layout of the editor.
     So they need these extra styles to highlight the editor when there is a validation error. */
+/* stylelint-disable function-url-scheme-blacklist */
+/* stylelint-enable function-url-scheme-blacklist */
 .has-danger .editor_atto_content.form-control,
 .has-danger .editor_atto_content.form-control-danger {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
@@ -16749,28 +16770,6 @@ textarea[data-auto-rows] {
   background-repeat: no-repeat;
   background-position: center right 1rem;
   background-size: 1.5rem; }
-  .has-danger .editor_atto_content.form-control .form-control-feedback,
-  .has-danger .editor_atto_content.form-control .form-control-label,
-  .has-danger .editor_atto_content.form-control .form-check-label,
-  .has-danger .editor_atto_content.form-control .form-check-inline,
-  .has-danger .editor_atto_content.form-control .custom-control,
-  .has-danger .editor_atto_content.form-control-danger .form-control-feedback,
-  .has-danger .editor_atto_content.form-control-danger .form-control-label,
-  .has-danger .editor_atto_content.form-control-danger .form-check-label,
-  .has-danger .editor_atto_content.form-control-danger .form-check-inline,
-  .has-danger .editor_atto_content.form-control-danger .custom-control {
-    color: #d43f3a; }
-  .has-danger .editor_atto_content.form-control .form-control,
-  .has-danger .editor_atto_content.form-control-danger .form-control {
-    border-color: #d43f3a; }
-  .has-danger .editor_atto_content.form-control .input-group-addon,
-  .has-danger .editor_atto_content.form-control-danger .input-group-addon {
-    color: #d43f3a;
-    border-color: #d43f3a;
-    background-color: #f9e2e1; }
-  .has-danger .editor_atto_content.form-control .form-control-feedback,
-  .has-danger .editor_atto_content.form-control-danger .form-control-feedback {
-    color: #d43f3a; }
 
 [data-filetypesbrowserbody] [aria-expanded="false"] > [role="group"],
 [data-filetypesbrowserbody] [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
@@ -17486,9 +17485,6 @@ select {
   float: left;
   margin-left: 4px; }
 
-.ie .row-fluid .desktop-first-column {
-  margin-left: 0; }
-
 .langmenu form {
   margin: 0; }
 
@@ -19130,7 +19126,7 @@ span[data-flexitour="container"] .modal-dialog {
   margin: 0; }
 
 span[data-flexitour="container"] div[data-role="arrow"] {
-  border-width: 11px; }
+  border-width: 1rem; }
 
 span[data-flexitour="container"] div[data-role="arrow"],
 span[data-flexitour="container"] div[data-role="arrow"]:after {
@@ -19145,9 +19141,9 @@ span[data-flexitour="container"] div[data-role="arrow"]:after {
 span[data-flexitour="container"][x-placement="top"], span[data-flexitour="container"][x-placement="top-start"] {
   margin-bottom: 1rem; }
   span[data-flexitour="container"][x-placement="top"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"] {
-    bottom: -11px;
+    bottom: -1rem;
     left: 50%;
-    margin-left: -11px;
+    margin-left: -1rem;
     border-bottom-width: 0;
     border-top-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="top"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"]:after {
@@ -19160,9 +19156,9 @@ span[data-flexitour="container"][x-placement="top"], span[data-flexitour="contai
 span[data-flexitour="container"][x-placement="bottom"], span[data-flexitour="container"][x-placement="bottom-start"] {
   margin-top: 1rem; }
   span[data-flexitour="container"][x-placement="bottom"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"] {
-    top: -11px;
+    top: -1rem;
     left: 50%;
-    margin-left: -11px;
+    margin-left: -1rem;
     border-top-width: 0;
     border-bottom-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="bottom"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"]:after {
@@ -19175,9 +19171,9 @@ span[data-flexitour="container"][x-placement="bottom"], span[data-flexitour="con
 span[data-flexitour="container"][x-placement="left"], span[data-flexitour="container"][x-placement="left-start"] {
   margin-right: 1rem; }
   span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"] {
-    right: -11px;
+    right: -1rem;
     top: 50%;
-    margin-top: -11px;
+    margin-top: -1rem;
     border-right-width: 0;
     border-left-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"]:after {
@@ -19190,9 +19186,9 @@ span[data-flexitour="container"][x-placement="left"], span[data-flexitour="conta
 span[data-flexitour="container"][x-placement="right"], span[data-flexitour="container"][x-placement="right-start"] {
   margin-left: 1rem; }
   span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"], span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"] {
-    left: -11px;
+    left: -1rem;
     top: 50%;
-    margin-top: -11px;
+    margin-top: -1rem;
     border-left-width: 0;
     border-right-color: rgba(0, 0, 0, 0.25); }
   span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"]:after, span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"]:after {
@@ -19207,114 +19203,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   margin-left: -15px;
   width: 275px; }
 
-.well {
-  border: 1px solid #dee2e6;
-  padding: 1.25rem; }
-
-.img-responsive {
-  max-width: 100%;
-  height: auto; }
-
-.text-error {
-  color: #d43f3a; }
-
-.btn-default {
-  color: #212529;
-  background-color: #ced4da;
-  border-color: #ced4da; }
-  .btn-default:hover {
-    color: #212529;
-    background-color: #b8c1ca;
-    border-color: #b1bbc4; }
-  .btn-default:focus, .btn-default.focus {
-    color: #212529;
-    background-color: #b8c1ca;
-    border-color: #b1bbc4;
-    box-shadow: 0 0 0 0.2rem rgba(180, 186, 191, 0.5); }
-  .btn-default.disabled, .btn-default:disabled {
-    color: #212529;
-    background-color: #ced4da;
-    border-color: #ced4da; }
-  .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
-  .show > .btn-default.dropdown-toggle {
-    color: #212529;
-    background-color: #b1bbc4;
-    border-color: #aab4bf; }
-    .btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus,
-    .show > .btn-default.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(180, 186, 191, 0.5); }
-
-.label {
-  display: inline-block;
-  padding: 0.25em 0.4em;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  color: #fff;
-  background-color: #6c757d; }
-  @media (prefers-reduced-motion: reduce) {
-    .label {
-      transition: none; } }
-  a.label:hover, a.label:focus {
-    color: #fff;
-    background-color: #545b62; }
-  a.label:focus, a.label.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
-
-.label-success {
-  color: #fff;
-  background-color: #398439; }
-  a.label-success:hover, a.label-success:focus {
-    color: #fff;
-    background-color: #2a602a; }
-  a.label-success:focus, a.label-success.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(57, 132, 57, 0.5); }
-
-.label-info {
-  color: #212529;
-  background-color: #5bc0de; }
-  a.label-info:hover, a.label-info:focus {
-    color: #212529;
-    background-color: #31b0d5; }
-  a.label-info:focus, a.label-info.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.5); }
-
-.label-warning {
-  color: #212529;
-  background-color: #f0ad4e; }
-  a.label-warning:hover, a.label-warning:focus {
-    color: #212529;
-    background-color: #ec971f; }
-  a.label-warning:focus, a.label-warning.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5); }
-
-.label-important {
-  color: #fff;
-  background-color: #d43f3a; }
-  a.label-important:hover, a.label-important:focus {
-    color: #fff;
-    background-color: #b42c27; }
-  a.label-important:focus, a.label-important.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(212, 63, 58, 0.5); }
-
-.pull-left {
-  float: left !important;
-  /* stylelint-disable-line declaration-no-important */ }
-
-.pull-right {
-  float: right !important;
-  /* stylelint-disable-line declaration-no-important */ }
-
 @media print {
   body.drawer-open-left.jsenabled,
   body.drawer-open-right.jsenabled {
diff --git a/theme/index.php b/theme/index.php
index fd0f96f7f26..0c8b879e523 100644
--- a/theme/index.php
+++ b/theme/index.php
@@ -115,7 +115,7 @@ if (!empty($CFG->enabledevicedetection) && empty($device)) {
                 $screenshoturl = new moodle_url('/theme/image.php',
                     array('theme' => $themename, 'image' => 'screenshot', 'component' => 'theme'));
                 // Contents of the screenshot/preview cell.
-                $screenshotcell = html_writer::empty_tag('img', array('class' => 'img-responsive img-fluid',
+                $screenshotcell = html_writer::empty_tag('img', array('class' => 'img-fluid',
                     'src' => $screenshoturl, 'alt' => $strthemename));
                 // Show the name of the picked theme.
                 $headingthemename = $OUTPUT->heading($strthemename, 3);
@@ -209,7 +209,7 @@ if (!empty($CFG->enabledevicedetection) && empty($device)) {
         $screenshotpath = new moodle_url('/theme/image.php',
             array('theme' => $themename, 'image' => 'screenshot', 'component' => 'theme'));
         // Contents of the first screenshot/preview cell.
-        $row[] = html_writer::empty_tag('img', array('class' => 'img-responsive img-fluid',
+        $row[] = html_writer::empty_tag('img', array('class' => 'img-fluid',
             'src' => $screenshotpath, 'alt' => $strthemename));
         // Contents of the second cell.
         $infocell = $OUTPUT->heading($strthemename, 3);
diff --git a/theme/upgrade.txt b/theme/upgrade.txt
index 8aa4d4d0f86..22941d79ea1 100644
--- a/theme/upgrade.txt
+++ b/theme/upgrade.txt
@@ -1,6 +1,28 @@
 This files describes API changes in /theme/* themes,
 information provided here is intended especially for theme designer.
 
+=== 4.0 ===
+* The Bootstrap legacy css utilities from Bootstrap 2 and 4alpha have been removed. 
+The syntax for the new Bootstrap 4.5 utility classes is {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
+The size values are:
+1: 0.25rem
+2: 0.5rem
+3: 1rem
+4: 1.5rem
+5: 2rem
+6: 3rem
+
+In Bootstrap 4alpa a spacing utility class '.m-l-1' would mean margin-left 1rem. With the new spacing classes it should now be '.ml-3'
+
+These class names have changed:
+.row-fluid is now .row
+.text-error is now .text-danger
+
+These classes should no longer be used:
+.label .label-{type}, use .badge .badge-{type} instead
+.tag .tag-{type}, use .badge .badge-{type} instead
+.well, just set a border with .border and a background with .bg-light
+
 === 3.9 ===
 
 * Add class .d-print-block to #page, #page-wrapper and #page content to fix Firefox printing problems