diff --git a/admin/roles/classes/define_role_table_advanced.php b/admin/roles/classes/define_role_table_advanced.php
index f230e0eb905..57b449f7aa2 100644
--- a/admin/roles/classes/define_role_table_advanced.php
+++ b/admin/roles/classes/define_role_table_advanced.php
@@ -645,7 +645,7 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
     protected function print_field($name, $caption, $field, $helpicon = null) {
         global $OUTPUT;
         // Attempt to generate HTML like formslib.
-        echo '<div class="fitem row form-group">';
+        echo '<div class="fitem row mb-3">';
         echo '<div class="fitemtitle col-md-3">';
         if ($name) {
             echo '<label for="' . $name . '">';
diff --git a/admin/templates/setting_courselist_frontpage.mustache b/admin/templates/setting_courselist_frontpage.mustache
index ef89725be44..782e6cf88b2 100644
--- a/admin/templates/setting_courselist_frontpage.mustache
+++ b/admin/templates/setting_courselist_frontpage.mustache
@@ -40,9 +40,9 @@
 {{!
     Setting courselist_frontpage.
 }}
-<div class="form-group">
+<div class="mb-3">
     {{#selects}}
-        <select id="{{id}}{{key}}" name="{{name}}[]" class="custom-select">
+        <select id="{{id}}{{key}}" name="{{name}}[]" class="custom-select mb-1">
             {{#options}}
                 <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
             {{/options}}
diff --git a/admin/templates/setting_emoticons.mustache b/admin/templates/setting_emoticons.mustache
index 8a245ddcbbd..255dcb965ba 100644
--- a/admin/templates/setting_emoticons.mustache
+++ b/admin/templates/setting_emoticons.mustache
@@ -35,7 +35,7 @@
 {{!
     Setting emoticons.
 }}
-<div class="form-group">
+<div class="mb-3">
     <table id="emoticonsetting" class="admintable generaltable">
         <thead>
             <tr>
diff --git a/admin/templates/setting_gradecat_combo.mustache b/admin/templates/setting_gradecat_combo.mustache
index 9e71c27f29b..e23cefe247f 100644
--- a/admin/templates/setting_gradecat_combo.mustache
+++ b/admin/templates/setting_gradecat_combo.mustache
@@ -40,7 +40,7 @@
 {{!
     Setting configselect.
 }}
-<div class="form-group">
+<div class="mb-3">
     <select id="{{id}}" name="{{name}}[value]" class="form-select custom-select">
         {{#options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
diff --git a/admin/tests/behat/behat_admin.php b/admin/tests/behat/behat_admin.php
index 78aa0b3f375..1f439e64619 100644
--- a/admin/tests/behat/behat_admin.php
+++ b/admin/tests/behat/behat_admin.php
@@ -75,7 +75,6 @@ class behat_admin extends behat_base {
                 // Multi element settings, interacting only the first one.
                 $fieldxpath = "//*[label[contains(., $label)]|span[contains(., $label)]]" .
                         "/ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' form-item ')]" .
-                        "/descendant::div[contains(concat(' ', @class, ' '), ' form-group ')]" .
                         "/descendant::*[self::input | self::textarea | self::select]" .
                         "[not(./@type = 'submit' or ./@type = 'image' or ./@type = 'hidden')]";
             }
diff --git a/admin/tool/dataprivacy/templates/category_purpose_form.mustache b/admin/tool/dataprivacy/templates/category_purpose_form.mustache
index c5d0ed4bea6..e886330ed42 100644
--- a/admin/tool/dataprivacy/templates/category_purpose_form.mustache
+++ b/admin/tool/dataprivacy/templates/category_purpose_form.mustache
@@ -62,7 +62,7 @@
 <form method="post" action="{{actionurl}}" id="category_purpose_form">
     <input type="hidden" value="{{contextlevel}}" id="contextlevel" />
     {{#modemodule}}
-    <div class="form-group">
+    <div class="mb-3">
         <label for="activity">{{#str}}activitymodule{{/str}}</label>
         {{^newactivitydefaults}}
             <input type="hidden" id="activity" value="{{#activityoptions}}{{#selected}}{{name}}{{/selected}}{{/activityoptions}}" />
@@ -74,7 +74,7 @@
         </select>
     </div>
     {{/modemodule}}
-    <div class="form-group">
+    <div class="mb-3">
         <label for="category">{{#str}}category, tool_dataprivacy{{/str}}</label>
         <select class="form-control" id="category">
         {{#categoryoptions}}
@@ -82,7 +82,7 @@
         {{/categoryoptions}}
         </select>
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="purpose">{{#str}}purpose, tool_dataprivacy{{/str}}</label>
         <select class="form-control" id="purpose">
         {{#purposeoptions}}
diff --git a/admin/tool/langimport/templates/langimport.mustache b/admin/tool/langimport/templates/langimport.mustache
index 957f0730133..e10d94f5472 100644
--- a/admin/tool/langimport/templates/langimport.mustache
+++ b/admin/tool/langimport/templates/langimport.mustache
@@ -69,7 +69,7 @@
         <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>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="menuuninstalllang">{{#str}}installedlangs, tool_langimport{{/str}}</label>
                         <select size="15" multiple="multiple" id="menuuninstalllang" class="form-control input-block-level" name="uninstalllang[]">
                             {{#installedoptions}}
@@ -77,7 +77,7 @@
                             {{/installedoptions}}
                         </select>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <input type="hidden" name="sesskey" value="{{sesskey}}">
                         <input id="languninstallbutton" type="submit" value="{{#str}}uninstall, tool_langimport{{/str}}" class="btn btn-secondary">
                     </div>
@@ -101,7 +101,7 @@
             <div class="col-md-6 mb-1">
                 <form id="installform" action="{{installurl}}" method="post">
                     <fieldset>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="menupack">{{#str}}availablelangs, install{{/str}}</label>
                             <select size="15" multiple="multiple" class="form-control input-block-level" id="menupack" name="pack[]">
                                 {{#toinstalloptions}}
@@ -116,7 +116,7 @@
                                 {{/label}}
                             {{/ core/search_input_auto }}
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <input type="hidden" name="sesskey" value="{{sesskey}}">
                             <input type="submit" value="{{#str}}install, tool_langimport{{/str}}" class="btn btn-secondary">
                         </div>
diff --git a/admin/tool/lp/classes/site_competencies_form_element.php b/admin/tool/lp/classes/site_competencies_form_element.php
index 02050d16257..497563a7095 100644
--- a/admin/tool/lp/classes/site_competencies_form_element.php
+++ b/admin/tool/lp/classes/site_competencies_form_element.php
@@ -69,7 +69,7 @@ class tool_lp_site_competencies_form_element extends MoodleQuickForm_hidden {
             $params = [$context->id];
             // Require some JS to select the competencies.
             $PAGE->requires->js_call_amd('tool_lp/form_competency_element', 'init', $params);
-            $html .= '<div class="form-group row">';
+            $html .= '<div class="mb-3 row">';
             $html .= '<div class="col-md-3"></div>';
             $html .= '<div class="col-md-9">';
             $html .= '<div data-region="competencies"></div>';
diff --git a/admin/tool/lp/templates/competency_picker.mustache b/admin/tool/lp/templates/competency_picker.mustache
index 455e3bfd7f9..43e5950ea9a 100644
--- a/admin/tool/lp/templates/competency_picker.mustache
+++ b/admin/tool/lp/templates/competency_picker.mustache
@@ -63,7 +63,7 @@
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
diff --git a/admin/tool/lp/templates/competency_picker_competencyform.mustache b/admin/tool/lp/templates/competency_picker_competencyform.mustache
index 0eac7383f9c..3ef8c8d6340 100644
--- a/admin/tool/lp/templates/competency_picker_competencyform.mustache
+++ b/admin/tool/lp/templates/competency_picker_competencyform.mustache
@@ -45,7 +45,7 @@
 <h3>{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
diff --git a/admin/tool/lp/templates/competency_picker_user_plans.mustache b/admin/tool/lp/templates/competency_picker_user_plans.mustache
index 770ee871796..afd5c5ca9ee 100644
--- a/admin/tool/lp/templates/competency_picker_user_plans.mustache
+++ b/admin/tool/lp/templates/competency_picker_user_plans.mustache
@@ -67,7 +67,7 @@
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" data-planid="{{plan.id}}" class="form-inline">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
diff --git a/admin/tool/lp/templates/competency_rule_config.mustache b/admin/tool/lp/templates/competency_rule_config.mustache
index 2cb5891f118..63e1264cbe7 100644
--- a/admin/tool/lp/templates/competency_rule_config.mustache
+++ b/admin/tool/lp/templates/competency_rule_config.mustache
@@ -58,7 +58,7 @@
 
         {{#config}}
         <div data-region="rule-base" class="form">
-            <div data-region="rule-outcome" class="form-group">
+            <div data-region="rule-outcome" class="mb-3">
                 <label>{{#str}}outcome, tool_lp{{/str}}</label>
                 <select name="outcome" class="custom-select">
                     {{#outcomes}}
@@ -66,7 +66,7 @@
                     {{/outcomes}}
                 </select>
             </div>
-            <div data-region="rule-type" class="form-group">
+            <div data-region="rule-type" class="mb-3">
                 <label>{{#str}}when, tool_lp{{/str}}</label>
                 <select name="rule" class="custom-select">
                     <option value="-1">{{#str}}choosedots{{/str}}</option>
diff --git a/auth/shibboleth/templates/login_form.mustache b/auth/shibboleth/templates/login_form.mustache
index b88e2cb7257..2a1a68964b1 100644
--- a/auth/shibboleth/templates/login_form.mustache
+++ b/auth/shibboleth/templates/login_form.mustache
@@ -71,7 +71,7 @@
             <div class="row justify-content-center ml-1 mr-1 mb-1">
                 <div class="col-md-5">
                     <form action="{{loginurl}}" method="post" id="login">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="idp">{{#str}}auth_shibboleth_select_organization, auth_shibboleth{{/str}}</label>
                             <select id="idp" name="idp" class="form-control input-block-level {{^isvalid}}is-invalid{{/isvalid}}">
                                 <option value="-">{{#str}}auth_shibboleth_select_member, auth_shibboleth{{/str}}</option>
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 4d5827fe489..0f5d4c5b1a5 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
@@ -26,7 +26,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 pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><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>';
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 4d5827fe489..0f5d4c5b1a5 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
@@ -26,7 +26,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 pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><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>';
diff --git a/availability/condition/completion/yui/src/form/js/form.js b/availability/condition/completion/yui/src/form/js/form.js
index 2ccf97cd743..97b8f1aaffc 100644
--- a/availability/condition/completion/yui/src/form/js/form.js
+++ b/availability/condition/completion/yui/src/form/js/form.js
@@ -24,7 +24,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 pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><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>';
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 8867dcca389..66d4aac8892 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="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><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++) {
@@ -45,13 +45,13 @@ M.availability_grade.form.getNode = function(json) {
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<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">' +
+            '<span class="availability-group mb-3">' +
             '<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') +
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 8867dcca389..66d4aac8892 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="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><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++) {
@@ -45,13 +45,13 @@ M.availability_grade.form.getNode = function(json) {
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<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">' +
+            '<span class="availability-group mb-3">' +
             '<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') +
diff --git a/availability/condition/grade/yui/src/form/js/form.js b/availability/condition/grade/yui/src/form/js/form.js
index 4927e6af402..15515a8b6c0 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="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><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++) {
@@ -43,13 +43,13 @@ M.availability_grade.form.getNode = function(json) {
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<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">' +
+            '<span class="availability-group mb-3">' +
             '<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') +
diff --git a/blocks/login/block_login.php b/blocks/login/block_login.php
index ba1d8b14d92..17d7ae9c018 100644
--- a/blocks/login/block_login.php
+++ b/blocks/login/block_login.php
@@ -66,12 +66,12 @@ class block_login extends block_base {
 
             $this->content->text .= "\n".'<form class="loginform" id="login" method="post" action="'.get_login_url().'">';
 
-            $this->content->text .= '<div class="form-group">';
+            $this->content->text .= '<div class="mb-3">';
             $this->content->text .= '<label for="login_username">'.$strusername.'</label>';
             $this->content->text .= '<input type="text" name="username" id="login_username" ';
             $this->content->text .= ' class="form-control" value="'.s($username).'" autocomplete="username"/></div>';
 
-            $this->content->text .= '<div class="form-group"><label for="login_password">'.get_string('password').'</label>';
+            $this->content->text .= '<div class="mb-3"><label for="login_password">'.get_string('password').'</label>';
 
             $this->content->text .= '<input type="password" name="password" id="login_password" ';
             $this->content->text .= ' class="form-control" value="" autocomplete="current-password"/>';
@@ -80,13 +80,13 @@ class block_login extends block_base {
             // ReCaptcha.
             if (login_captcha_enabled()) {
                 require_once($CFG->libdir . '/recaptchalib_v2.php');
-                $this->content->text .= '<div class="form-group">';
+                $this->content->text .= '<div class="mb-3">';
                 $this->content->text .= recaptcha_get_challenge_html(RECAPTCHA_API_URL, $CFG->recaptchapublickey,
                     current_language(), true);
                 $this->content->text .= '</div>';
             }
 
-            $this->content->text .= '<div class="form-group">';
+            $this->content->text .= '<div class="mb-3">';
             $this->content->text .= '<input type="submit" class="btn btn-primary btn-block" value="'.get_string('login').'" />';
             $this->content->text .= '</div>';
             $this->content->text .= '<input type="hidden" name="logintoken" value="'.s(\core\session\manager::get_login_token()).'" />';
diff --git a/calendar/templates/export_calendar_url.mustache b/calendar/templates/export_calendar_url.mustache
index 119208b6f8b..7bcd480dc38 100644
--- a/calendar/templates/export_calendar_url.mustache
+++ b/calendar/templates/export_calendar_url.mustache
@@ -26,7 +26,7 @@
 }}
 <div class="card">
     <div class="card-body alert-info">
-        <div class="form-group">
+        <div class="mb-3">
             <label for="calendarexporturl">{{#str}}calendarexporturl, calendar{{/str}}</label>
             <div class="input-group">
                 <input type="text" id="calendarexporturl" class="form-control" value="{{calendarexporturl}}" readonly />
diff --git a/enrol/yui/rolemanager/rolemanager.js b/enrol/yui/rolemanager/rolemanager.js
index b34278ded43..e8a77ee52ed 100644
--- a/enrol/yui/rolemanager/rolemanager.js
+++ b/enrol/yui/rolemanager/rolemanager.js
@@ -366,7 +366,7 @@ YUI.add('moodle-enrol-rolemanager', function(Y) {
                                         M.util.get_string('closebuttontitle', 'moodle') + '">' +
                                         '<span aria-hidden="true">&times;</span></div>' +
                                         '<h3>'+M.util.get_string('assignroles', 'role')+'</h3>' +
-                                        '</div><div class="content popover-content form-inline form-group"></div></div>');
+                                        '</div><div class="content popover-content form-inline mb-3"></div></div>');
             var content = element.one('.content');
             var roles = m.get(ASSIGNABLEROLES);
             for (i in roles) {
diff --git a/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache b/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
index e364b774834..cd1ab6efd5b 100644
--- a/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
+++ b/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
@@ -101,7 +101,7 @@
           </div>
       </div>
       <div class="collapse show" id="criteria-{{id}}">
-        <div class="form-group">
+        <div class="mb-3">
           <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
           <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
             id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
@@ -112,7 +112,7 @@
             }}{{#str}}score_help, gradingform_guide, { "criterion":  {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}}
           </span>
         </div>
-        <div class="form-group ">
+        <div class="mb-3 ">
           <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
           <div class="input-group mb-3 form-inset form-inset-right">
             <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
diff --git a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
index 5da5be9c0aa..56a495e018d 100644
--- a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
+++ b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
@@ -104,7 +104,7 @@
                             </label>
                         </div>
                     {{/levels}}
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label class="text-muted" for="advancedgrading-criteria-{{id}}-remark">{{#str}} additionalfeedback, core_grades {{/str}}</label>
                         <textarea class="form-control"
                                   name="advancedgrading[criteria][{{id}}][remark]"
diff --git a/grade/templates/grades/grader/gradingpanel/point.mustache b/grade/templates/grades/grader/gradingpanel/point.mustache
index c51feaea384..ab28c85ec0a 100644
--- a/grade/templates/grades/grader/gradingpanel/point.mustache
+++ b/grade/templates/grades/grader/gradingpanel/point.mustache
@@ -27,7 +27,7 @@
     }
 }}
 <form>
-  <div class="form-group">
+  <div class="mb-3">
     <label for="core_grades-grade-{{uniqid}}">{{#str}}gradenoun, moodle{{/str}}</label>
     <input class="form-control" type="number" name="grade" value="{{grade}}" id="core_grades-grade-{{uniqid}}" aria-describedby="core_grades-help-{{uniqid}}">
     <small id="core_grades-help-{{uniqid}}" class="form-text text-muted">{{#str}}grade_help, core_grades{{/str}}</small>
diff --git a/grade/templates/grades/grader/gradingpanel/scale.mustache b/grade/templates/grades/grader/gradingpanel/scale.mustache
index 39706ce1bf5..ed73197b606 100644
--- a/grade/templates/grades/grader/gradingpanel/scale.mustache
+++ b/grade/templates/grades/grader/gradingpanel/scale.mustache
@@ -29,7 +29,7 @@
     }
 }}
 <form>
-  <div class="form-group">
+  <div class="mb-3">
     <label for="core_grades-grade-{{uniqid}}">{{#str}}gradenoun, moodle{{/str}}</label>
     <select class="form-control" name="grade" id="core_grades-grade-{{uniqid}}" aria-describedby="core_grades-help-{{uniqid}}">
         <option value="-1">{{#str}} nograde, moodle{{/str}}</option>
diff --git a/group/templates/index.mustache b/group/templates/index.mustache
index 42417404962..0d55423071c 100644
--- a/group/templates/index.mustache
+++ b/group/templates/index.mustache
@@ -82,7 +82,7 @@
         <div class="row rtl-compatible">
             <div class="col-md-6 mb-1">
                 <input type="hidden" name="id" value="{{courseid}}">
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="groups">
                         <span id="groupslabel">{{#str}}groups{{/str}}</span>
                         <span id="thegrouping">&nbsp;</span>
@@ -94,36 +94,36 @@
                     </select>
                 </div>
                 <h3> {{#str}} withselected, group {{/str}} </h3>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="updatemembers" value="updatemembers" class="btn btn-secondary">{{#str}}showmembersforgroup, group{{/str}}</button>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="showeditgroupsettingsform" value="showgroupsettingsform" {{#editgroupsettingsdisabled}}disabled="disabled"{{/editgroupsettingsdisabled}} class="btn btn-secondary">{{#str}}editgroupsettings, group{{/str}}</button>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="deletegroup" value="deletegroup" {{#deletegroupdisabled}}disabled="disabled"{{/deletegroupdisabled}} class="btn btn-secondary">{{#str}}deleteselectedgroup, group{{/str}}</button>
                 </div>
                 {{#messagingsettingsvisible}}
-                    <div class="form-group">
+                    <div class="mb-3">
                         <button type="submit" name="action" id="disablemessaging" value="disablemessaging" class="btn btn-secondary" disabled="disabled">{{#str}}disablemessagingaction, group{{/str}}</button>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <button type="submit" name="action" id="enablemessaging" value="enablemessaging" class="btn btn-secondary" disabled="disabled">{{#str}}enablemessagingaction, group{{/str}}</button>
                     </div>
                 {{/messagingsettingsvisible}}
                 <h3> {{#str}} manageactions, group {{/str}} </h3>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="showcreateorphangroupform" value="showcreateorphangroupform" class="btn btn-secondary">{{#str}}creategroup, group{{/str}}</button>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="showautocreategroupsform" value="showautocreategroupsform" class="btn btn-secondary">{{#str}}autocreategroups, group{{/str}}</button>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" name="action" id="showimportgroups" value="showimportgroups" class="btn btn-secondary">{{#str}}importgroups, group{{/str}}</button>
                 </div>
             </div>
             <div class="col-md-6 mb-1">
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="members">
                         <span id="memberslabel">{{#str}}membersofselectedgroup, group{{/str}}</span>
                         <span id="thegroup">{{{selectedgroup}}}</span>
@@ -138,7 +138,7 @@
                         {{/members}}
                     </select>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <button type="submit" value="showaddmembersform" class="btn btn-secondary" {{#addmembersdisabled}}disabled="disabled"{{/addmembersdisabled}} name="action" id="showaddmembersform">{{#str}}adduserstogroup, group{{/str}}</button>
                 </div>
             </div>
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
index d5fb43a6d0b..2151506aa0c 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
@@ -361,7 +361,7 @@ var COMPONENTNAME = 'atto_media',
             TRACK: '' +
                 '<div class="mb-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
                         '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
@@ -374,7 +374,7 @@ var COMPONENTNAME = 'atto_media',
                             '</optgroup>' +
                         '</select>' +
                     '</div>' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
                         '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
                     '</div>' +
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
index d5fb43a6d0b..2151506aa0c 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
@@ -361,7 +361,7 @@ var COMPONENTNAME = 'atto_media',
             TRACK: '' +
                 '<div class="mb-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
                         '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
@@ -374,7 +374,7 @@ var COMPONENTNAME = 'atto_media',
                             '</optgroup>' +
                         '</select>' +
                     '</div>' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
                         '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
                     '</div>' +
diff --git a/lib/editor/atto/plugins/media/yui/src/button/js/button.js b/lib/editor/atto/plugins/media/yui/src/button/js/button.js
index c70079477b1..e5e84cd76ae 100644
--- a/lib/editor/atto/plugins/media/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/media/yui/src/button/js/button.js
@@ -359,7 +359,7 @@ var COMPONENTNAME = 'atto_media',
             TRACK: '' +
                 '<div class="mb-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
                         '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
@@ -372,7 +372,7 @@ var COMPONENTNAME = 'atto_media',
                             '</optgroup>' +
                         '</select>' +
                     '</div>' +
-                    '<div class="form-group">' +
+                    '<div class="mb-3">' +
                         '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
                         '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
                     '</div>' +
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 edee27cd96c..7a56feedb94 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">' +
+            '<div class="mb-1 mb-3 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="mb-1 mb-3 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">' +
+            '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
index edee27cd96c..7a56feedb94 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">' +
+            '<div class="mb-1 mb-3 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="mb-1 mb-3 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">' +
+            '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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 13f7f236b98..d8ed3d340be 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">' +
+            '<div class="mb-1 mb-3 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="mb-1 mb-3 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">' +
+            '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 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">' +
+                    '<div class="mb-1 mb-3 row">' +
                     '<div class="col-sm-4">' +
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
diff --git a/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache b/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
index 13a4c9e22d2..bc9c2fc81b9 100644
--- a/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
+++ b/lib/editor/tiny/plugins/media/templates/embed_media_modal_audio.mustache
@@ -260,7 +260,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="subtitle-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -275,7 +275,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="subtitle-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -312,7 +312,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="subtitle-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -327,7 +327,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="subtitle-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -372,7 +372,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="caption-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -387,7 +387,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="caption-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -424,7 +424,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="caption-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -439,7 +439,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="caption-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -484,7 +484,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="description-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -499,7 +499,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="description-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -536,7 +536,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="description-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -551,7 +551,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="description-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -596,7 +596,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="chapter-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -611,7 +611,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="chapter-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -648,7 +648,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="chapter-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -663,7 +663,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="chapter-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -709,7 +709,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="metadata-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -724,7 +724,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="metadata-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -761,7 +761,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="metadata-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -776,7 +776,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="metadata-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
diff --git a/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache b/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
index d646059bf54..905442d7e52 100644
--- a/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
+++ b/lib/editor/tiny/plugins/media/templates/embed_media_modal_video.mustache
@@ -290,7 +290,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="subtitle-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -305,7 +305,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="subtitle-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -342,7 +342,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="subtitle-video-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -357,7 +357,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="subtitle-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="subtitle-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -402,7 +402,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="caption-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -417,7 +417,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="caption-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -454,7 +454,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="caption-video-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -469,7 +469,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="caption-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="caption-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -514,7 +514,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="description-video-ang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -529,7 +529,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="description-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -566,7 +566,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="description-video-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -581,7 +581,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="description-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="description-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -626,7 +626,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="chapter-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -641,7 +641,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="chapter-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -678,7 +678,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="chapter-video-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -693,7 +693,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="chapter-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="chapter-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
@@ -739,7 +739,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="metadata-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -754,7 +754,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="metadata-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                         </div>
@@ -791,7 +791,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                             <select id="metadata-video-lang-input" class="custom-select tiny_media_track_lang_entry">
                                 <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
@@ -806,7 +806,7 @@
                                 </optgroup>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label class="w-100" for="metadata-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
                             <input id="metadata-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                         </div>
diff --git a/lib/form/templates/element-advcheckbox.mustache b/lib/form/templates/element-advcheckbox.mustache
index 7adceb68ca6..58b6a53edc1 100644
--- a/lib/form/templates/element-advcheckbox.mustache
+++ b/lib/form/templates/element-advcheckbox.mustache
@@ -1,4 +1,4 @@
-<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}">
+<div class="mb-3 row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}">
     <div class="col-md-3 col-form-label pb-0 pt-0">
         {{#text}}
             <label class="d-inline word-break" for="{{element.id}}">
diff --git a/lib/form/templates/element-checkbox.mustache b/lib/form/templates/element-checkbox.mustache
index 91e6b9a7c00..20af4ceed7e 100644
--- a/lib/form/templates/element-checkbox.mustache
+++ b/lib/form/templates/element-checkbox.mustache
@@ -1,4 +1,4 @@
-<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}">
+<div class="mb-3 row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}">
     <div class="col-md-3 col-form-label pb-0 pt-0">
         {{#text}}
             <label class="d-inline word-break" for="{{element.id}}">
diff --git a/lib/form/templates/element-radio.mustache b/lib/form/templates/element-radio.mustache
index 0dd414c43d3..14acb2c1d76 100644
--- a/lib/form/templates/element-radio.mustache
+++ b/lib/form/templates/element-radio.mustache
@@ -10,7 +10,7 @@
     }
 
 }}
-<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.parentclasses}}}">
+<div class="mb-3 row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.parentclasses}}}">
     <div class="col-md-3 col-form-label pb-0 pt-0">
         {{#text}}
             <label class="d-inline word-break" for="{{element.id}}">
diff --git a/lib/form/templates/element-template-inline.mustache b/lib/form/templates/element-template-inline.mustache
index b7b61a09273..96448fc037f 100644
--- a/lib/form/templates/element-template-inline.mustache
+++ b/lib/form/templates/element-template-inline.mustache
@@ -1,4 +1,4 @@
-<div class="form-group {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
+<div class="mb-3 {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
     {{#label}}
         <label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
             {{{label}}}
diff --git a/lib/form/templates/element-template.mustache b/lib/form/templates/element-template.mustache
index fcaaa418a47..d29d99303cb 100644
--- a/lib/form/templates/element-template.mustache
+++ b/lib/form/templates/element-template.mustache
@@ -42,7 +42,7 @@
         }
     }
 }}
-<div id="{{element.wrapperid}}" class="form-group row {{#error}}has-danger{{/error}} fitem {{#element.emptylabel}}femptylabel{{/element.emptylabel}} {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
+<div id="{{element.wrapperid}}" class="mb-3 row {{#error}}has-danger{{/error}} fitem {{#element.emptylabel}}femptylabel{{/element.emptylabel}} {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}} {{{element.parentclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
     <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
         {{# label}}{{$ label }}
             {{^element.staticlabel}}
diff --git a/lib/templates/filemanager_default_searchform.mustache b/lib/templates/filemanager_default_searchform.mustache
index 2bf592e9a5e..b10d50d7b09 100644
--- a/lib/templates/filemanager_default_searchform.mustache
+++ b/lib/templates/filemanager_default_searchform.mustache
@@ -22,7 +22,7 @@
     Example context (json):
     {}
 }}
-<div class="fp-def-search form-group">
+<div class="fp-def-search mb-3">
     <label class="sr-only" for="reposearch">{{#str}}searchrepo, repository{{/str}}</label>
     <input type="search" class="form-control" id="reposearch" name="s" placeholder="{{#str}}search, repository{{/str}}"/>
 </div>
diff --git a/lib/templates/filemanager_fileselect.mustache b/lib/templates/filemanager_fileselect.mustache
index c827c9a38b6..38af30d9b44 100644
--- a/lib/templates/filemanager_fileselect.mustache
+++ b/lib/templates/filemanager_fileselect.mustache
@@ -34,7 +34,7 @@
         {{#pix}}i/loading_small{{/pix}}
     </div>
     <form class="mform clearfix">
-        <div class="form-group mx-0">
+        <div class="mb-3 mx-0">
             <button class="fp-file-download btn btn-secondary">{{#str}}download{{/str}}</button>
             <button class="fp-file-delete btn btn-secondary">{{#str}}delete{{/str}}</button>
             <button class="fp-file-setmain btn btn-secondary">{{#str}}setmainfile, repository{{/str}}</button>
@@ -43,31 +43,31 @@
             <button class="fp-file-unzip btn btn-secondary">{{#str}}unzip{{/str}}</button>
         </div>
 
-                <div class="fp-saveas form-group row mx-0">
+                <div class="fp-saveas mb-3 row mx-0">
                     <label class="form-control-label col-4 px-0">{{#str}}name, repository{{/str}}</label>
                     <div class="col-8 form-inline"><input class="form-control" type="text"/></div>
                 </div>
-                <div class="fp-author form-group row mx-0">
+                <div class="fp-author mb-3 row mx-0">
                     <label class="form-control-label col-4 px-0">{{#str}}author, repository{{/str}}</label>
                     <div class="col-8 form-inline"><input class="form-control" type="text"/></div>
 
                 </div>
-                <div class="fp-license form-group row mx-0">
+                <div class="fp-license mb-3 row mx-0">
                     {{>core/filemanager_chooselicense}}
                 </div>
-                <div class="fp-path form-group row mx-0">
+                <div class="fp-path mb-3 row mx-0">
                     <label class="form-control-label col-4 px-0">{{#str}}path, repository{{/str}}</label>
                     <div class="col-8 form-inline pr-0">
                         <select class="custom-select form-control"></select>
                     </div>
                 </div>
-                <div class="fp-original form-group row mx-0">
+                <div class="fp-original mb-3 row mx-0">
                     <div class="form-control-label col-4 px-0">{{#str}}original, repository{{/str}}</div>
                     <div class="col-8 form-inline">
                         <span class="fp-originloading">{{#pix}}i/loading_small{{/pix}} {{#str}}loading, repository{{/str}}</span><span class="fp-value"></span>
                     </div>
                 </div>
-                <div class="fp-reflist form-group row mx-0">
+                <div class="fp-reflist mb-3 row mx-0">
                     <div class="form-control-label col-4 px-0">{{#str}}referenceslist, repository{{/str}}</div>
                     <div class="col-8 form-inline">
                         <p class="fp-refcount"></p>
@@ -75,7 +75,7 @@
                         <ul class="fp-value"></ul>
                     </div>
                 </div>
-        <div class="fp-select-buttons form-group">
+        <div class="fp-select-buttons mb-3">
             <button class="fp-file-update btn-primary btn">{{#str}}update{{/str}}</button>
             <button class="fp-file-cancel btn-secondary btn">{{#str}}cancel{{/str}}</button>
         </div>
diff --git a/lib/templates/filemanager_loginform.mustache b/lib/templates/filemanager_loginform.mustache
index c9d6caecdfb..afe90ab3fb3 100644
--- a/lib/templates/filemanager_loginform.mustache
+++ b/lib/templates/filemanager_loginform.mustache
@@ -10,29 +10,29 @@
     <div class="fp-content-center">
         <form class="form">
             <div class="fp-formset">
-                <div class="fp-login-popup form-group">
+                <div class="fp-login-popup mb-3">
                     <div class="fp-popup">
                         <p class="mdl-align">
                             <button class="fp-login-popup-but btn-primary btn">{{#str}}login, repository{{/str}}</button>
                         </p>
                     </div>
                 </div>
-                <div class="fp-login-textarea form-group">
+                <div class="fp-login-textarea mb-3">
                     <textarea class="form-control"></textarea>
                 </div>
-                <div class="fp-login-select form-group">
+                <div class="fp-login-select mb-3">
                     <label class="form-control-label"></label>
                     <select class="custom-select"></select>
                 </div>
-                <div class="fp-login-input form-group">
+                <div class="fp-login-input mb-3">
                     <label class="form-control-label"></label>
                     <input class="form-control"/>
                 </div>
-                <div class="fp-login-radiogroup form-group">
+                <div class="fp-login-radiogroup mb-3">
                     <label class="form-control-label"></label>
                     <div class="fp-login-radio"><input class="form-control" /> <label></label></div>
                 </div>
-                <div class="fp-login-checkbox form-group form-inline">
+                <div class="fp-login-checkbox mb-3 form-inline">
                     <label class="form-control-label"></label>
                     <input class="form-control"/>
                 </div>
diff --git a/lib/templates/filemanager_selectlayout.mustache b/lib/templates/filemanager_selectlayout.mustache
index d97b92e1f65..dd65c003f0e 100644
--- a/lib/templates/filemanager_selectlayout.mustache
+++ b/lib/templates/filemanager_selectlayout.mustache
@@ -29,7 +29,7 @@
     </div>
     <div class="container">
         <form>
-            <fieldset class="form-group row flex-column">
+            <fieldset class="mb-3 row flex-column">
                 <div class="form-check fp-linktype-2">
                     <label class="form-check-label">
                         <input class="form-check-input" type="radio">
@@ -55,18 +55,18 @@
                     </label>
                 </div>
             </fieldset>
-            <div class="fp-saveas form-group row">
+            <div class="fp-saveas mb-3 row">
                 <label class="col-form-label">{{#str}}saveas, repository{{/str}}</label>
                 <input class="form-control" type="text">
             </div>
-            <div class="fp-setauthor form-group row">
+            <div class="fp-setauthor mb-3 row">
                 <label class="col-form-label">{{#str}}author, repository{{/str}}</label>
                 <input class="form-control" type="text">
             </div>
-            <div class="fp-setlicense form-group row">
+            <div class="fp-setlicense mb-3 row">
                 {{>core/filemanager_chooselicense}}
             </div>
-            <div class="form-group row">
+            <div class="mb-3 row">
                 <div class="fp-select-buttons">
                     <button class="fp-select-confirm btn-primary btn">{{#str}}getfile, repository{{/str}}</button>
                     <button class="fp-select-cancel btn-secondary btn">{{#str}}cancel{{/str}}</button>
diff --git a/lib/templates/filemanager_uploadform.mustache b/lib/templates/filemanager_uploadform.mustache
index 80b8e470a83..790f9ef3a61 100644
--- a/lib/templates/filemanager_uploadform.mustache
+++ b/lib/templates/filemanager_uploadform.mustache
@@ -26,21 +26,21 @@
     <div class="fp-content-center">
         <form enctype="multipart/form-data" method="POST" class="form">
             <div class="fp-formset">
-                <div class="fp-file form-group">
+                <div class="fp-file mb-3">
                     <label>{{#str}}attachment, repository{{/str}}</label>
                     <div class="px-3">
                         <input  type="file"/>
                     </div>
                 </div>
-                <div class="fp-saveas form-group">
+                <div class="fp-saveas mb-3">
                     <label>{{#str}}saveas, repository{{/str}}</label>
                     <input type="text" class="form-control"/>
                 </div>
-                <div class="fp-setauthor form-group">
+                <div class="fp-setauthor mb-3">
                     <label>{{#str}}author, repository{{/str}}</label>
                     <input type="text" class="form-control"/>
                 </div>
-                <div class="fp-setlicense form-group">
+                <div class="fp-setlicense mb-3">
                     {{>core/filemanager_chooselicense}}
                 </div>
             </div>
diff --git a/lib/templates/loginform.mustache b/lib/templates/loginform.mustache
index 034b0c85fd8..05060f3ff6e 100644
--- a/lib/templates/loginform.mustache
+++ b/lib/templates/loginform.mustache
@@ -125,7 +125,7 @@
         <input id="anchor" type="hidden" name="anchor" value="">
         <script>document.getElementById('anchor').value = location.hash;</script>
         <input type="hidden" name="logintoken" value="{{logintoken}}">
-        <div class="login-form-username form-group">
+        <div class="login-form-username mb-3">
             <label for="username" class="sr-only">
                 {{^canloginbyemail}}
                     {{#str}} username {{/str}}
@@ -141,7 +141,7 @@
                 !}}{{#canloginbyemail}}{{#cleanstr}}usernameemail{{/cleanstr}}{{/canloginbyemail}}" {{!
                 !}}autocomplete="username">
         </div>
-        <div class="login-form-password form-group">
+        <div class="login-form-password mb-3">
             <label for="password" class="sr-only">{{#str}} password {{/str}}</label>
             <input type="password" name="password" id="password" value="" {{!
                 !}}class="form-control form-control-lg" {{!
@@ -149,14 +149,14 @@
                 !}}autocomplete="current-password">
         </div>
         {{#recaptcha}}
-            <div class="login-form-recaptcha form-group">
+            <div class="login-form-recaptcha mb-3">
                 {{{recaptcha}}}
             </div>
         {{/recaptcha}}
-        <div class="login-form-submit form-group">
+        <div class="login-form-submit mb-3">
             <button class="btn btn-primary btn-lg" type="submit" id="loginbtn">{{#str}}login{{/str}}</button>
         </div>
-        <div class="login-form-forgotpassword form-group">
+        <div class="login-form-forgotpassword mb-3">
             <a href="{{forgotpasswordurl}}">{{#str}}forgotaccount{{/str}}</a>
         </div>
     </form>
diff --git a/mod/chat/gui_ajax/index.php b/mod/chat/gui_ajax/index.php
index a9b60c5c22d..9f2779e57e6 100644
--- a/mod/chat/gui_ajax/index.php
+++ b/mod/chat/gui_ajax/index.php
@@ -100,11 +100,11 @@ $table = new html_table();
 $table->data = array(
     array('<div class="form-inline"><div class="d-flex"><label class="accesshide" for="input-message">'.
           get_string('entermessage', 'chat').' </label>'.
-          '<span class="form-group"><input type="text" disabled="true" class="form-control" ' .
+          '<span class="mb-3"><input type="text" disabled="true" class="form-control" ' .
           'id="input-message" value="Loading..." size="48" /></span>'.
-          '<span class="form-group"><input type="button" id="button-send" class="btn btn-secondary mx-1" ' .
+          '<span class="mb-3"><input type="button" id="button-send" class="btn btn-secondary mx-1" ' .
           'value="'.get_string('send', 'chat').'" />' .$OUTPUT->help_icon('usingchat', 'chat'). '</span></div>' .
-          ' <div class="form-group d-flex ml-auto"><a id="choosetheme" href="###">'.
+          ' <div class="mb-3 d-flex ml-auto"><a id="choosetheme" href="###">'.
           get_string('themes').
           ' &raquo; </a></div></div>'));
 echo $OUTPUT->box(html_writer::tag('h2',  get_string('composemessage', 'chat'), array('class' => 'accesshide')) .
diff --git a/mod/data/preset/imagegallery/addtemplate.html b/mod/data/preset/imagegallery/addtemplate.html
index b00753ac5e0..ff5987f4774 100644
--- a/mod/data/preset/imagegallery/addtemplate.html
+++ b/mod/data/preset/imagegallery/addtemplate.html
@@ -1,13 +1,13 @@
 <div class="imagegallery-addentry">
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[title#name]]</div>
         [[title]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[image#name]]</div>
         [[image]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[description#name]]</div>
         [[description]]
     </div>
diff --git a/mod/data/preset/imagegallery/asearchtemplate.html b/mod/data/preset/imagegallery/asearchtemplate.html
index 4b5ec8a6c84..61fce5705a3 100644
--- a/mod/data/preset/imagegallery/asearchtemplate.html
+++ b/mod/data/preset/imagegallery/asearchtemplate.html
@@ -1,19 +1,19 @@
 <div class="imagegallery-asearch container">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">First name</div>
             ##firstname##
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Last name</div>
             ##lastname##
         </div>
 
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[title#name]]</div>
             [[title]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[description#name]]</div>
             [[description]]
         </div>
diff --git a/mod/data/preset/journal/addtemplate.html b/mod/data/preset/journal/addtemplate.html
index 6e4981f13c9..be94fa742df 100644
--- a/mod/data/preset/journal/addtemplate.html
+++ b/mod/data/preset/journal/addtemplate.html
@@ -1,9 +1,9 @@
 <div class="journal-addentry">
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Title#name]]</div>
         [[Title]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Content#name]]</div>
         [[Content]]
     </div>
diff --git a/mod/data/preset/journal/asearchtemplate.html b/mod/data/preset/journal/asearchtemplate.html
index 5ac6b1edaed..c1bfcd105c3 100644
--- a/mod/data/preset/journal/asearchtemplate.html
+++ b/mod/data/preset/journal/asearchtemplate.html
@@ -1,19 +1,19 @@
 <div class="journal-asearch container">
     <div class="row row-cols-3">
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">First name</div>
             ##firstname##
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Last name</div>
             ##lastname##
         </div>
 
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Title#name]]</div>
             [[Title]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Content#name]]</div>
             [[Content]]
         </div>
diff --git a/mod/data/preset/proposals/addtemplate.html b/mod/data/preset/proposals/addtemplate.html
index 495b43e2f91..c28dace0d1c 100644
--- a/mod/data/preset/proposals/addtemplate.html
+++ b/mod/data/preset/proposals/addtemplate.html
@@ -1,17 +1,17 @@
 <div class="proposals-addentry">
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Title#name]]</div>
         [[Title]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Status#name]]</div>
         [[Status]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Summary#name]]</div>
         [[Summary]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Content#name]]</div>
         [[Content]]
     </div>
diff --git a/mod/data/preset/proposals/asearchtemplate.html b/mod/data/preset/proposals/asearchtemplate.html
index 5ac7b5b30ab..9c060300d1a 100644
--- a/mod/data/preset/proposals/asearchtemplate.html
+++ b/mod/data/preset/proposals/asearchtemplate.html
@@ -1,27 +1,27 @@
 <div class="proposals-asearch container">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">First name</div>
             ##firstname##
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Last name</div>
             ##lastname##
         </div>
 
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Title#name]]</div>
             [[Title]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Status#name]]</div>
             [[Status]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Summary#name]]</div>
             [[Summary]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Content#name]]</div>
             [[Content]]
         </div>
diff --git a/mod/data/preset/resources/addtemplate.html b/mod/data/preset/resources/addtemplate.html
index ed7b322175d..67a9eef6e95 100644
--- a/mod/data/preset/resources/addtemplate.html
+++ b/mod/data/preset/resources/addtemplate.html
@@ -1,25 +1,25 @@
 <div class="resources-addentry">
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Title#name]]</div>
         [[Title]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">Author of resource</div>
         [[Author]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Cover#name]]</div>
         [[Cover]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">Content</div>
         [[Description]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Web link#name]]</div>
         [[Web link]]
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <div class="font-weight-bold">[[Type#name]]</div>
         [[Type]]
     </div>
diff --git a/mod/data/preset/resources/asearchtemplate.html b/mod/data/preset/resources/asearchtemplate.html
index 0c2c6457299..5afe55e5764 100644
--- a/mod/data/preset/resources/asearchtemplate.html
+++ b/mod/data/preset/resources/asearchtemplate.html
@@ -1,31 +1,31 @@
 <div class="resources-asearch container">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">First name</div>
             ##firstname##
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Last name</div>
             ##lastname##
         </div>
 
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Title#name]]</div>
             [[Title]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Author of resource</div>
             [[Author]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">Content</div>
             [[Description]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Web link#name]]</div>
             [[Web link]]
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">[[Type#name]]</div>
             [[Type]]
         </div>
diff --git a/mod/data/templates/defaulttemplate_addtemplate.mustache b/mod/data/templates/defaulttemplate_addtemplate.mustache
index c75f0939513..22103551f7b 100644
--- a/mod/data/templates/defaulttemplate_addtemplate.mustache
+++ b/mod/data/templates/defaulttemplate_addtemplate.mustache
@@ -35,14 +35,14 @@
 }}
 <div id="defaulttemplate-addentry">
     {{#fields}}
-        <div class="form-group pt-3">
+        <div class="mb-3 pt-3">
             <div class="font-weight-bold">{{fieldname}}</div>
             {{{fieldcontent}}}
         </div>
     {{/fields}}
     ##otherfields##
     {{#tags}}
-        <div class="form-group pt-3">
+        <div class="mb-3 pt-3">
             <div class="font-weight-bold">{{#str}}tags{{/str}}</div>
             {{{.}}}
         </div>
diff --git a/mod/data/templates/defaulttemplate_asearchtemplate.mustache b/mod/data/templates/defaulttemplate_asearchtemplate.mustache
index 5defadef0c8..8739ed04fa0 100644
--- a/mod/data/templates/defaulttemplate_asearchtemplate.mustache
+++ b/mod/data/templates/defaulttemplate_asearchtemplate.mustache
@@ -35,24 +35,24 @@
 }}
 <div class="defaulttemplate-asearch container">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">{{#str}}authorfirstname, mod_data{{/str}}</div>
             ##firstname##
         </div>
-        <div class="form-group col">
+        <div class="mb-3 col">
             <div class="font-weight-bold mb-2">{{#str}}authorlastname, mod_data{{/str}}</div>
             ##lastname##
         </div>
 
         {{#fields}}
-            <div class="form-group col">
+            <div class="mb-3 col">
                 <div class="font-weight-bold mb-2">{{fieldname}}</div>
                 {{fieldcontent}}
             </div>
         {{/fields}}
 
         {{#tags}}
-            <div class="form-group col">
+            <div class="mb-3 col">
                 <div class="font-weight-bold mb-2">{{#str}}tags{{/str}}</div>
                 {{.}}
             </div>
diff --git a/mod/forum/classes/output/big_search_form.php b/mod/forum/classes/output/big_search_form.php
index 42bfdc760f0..b627acc767a 100644
--- a/mod/forum/classes/output/big_search_form.php
+++ b/mod/forum/classes/output/big_search_form.php
@@ -232,19 +232,19 @@ class big_search_form implements renderable, templatable {
             $dateto = time() + HOURSECS;
         }
 
-        $data->datefromfields = html_writer::div(html_writer::select_time('days', 'fromday', $datefrom), 'form-group fitem ml-2')
+        $data->datefromfields = html_writer::div(html_writer::select_time('days', 'fromday', $datefrom), 'mb-3 fitem ml-2')
                               . html_writer::div(html_writer::select_time('months', 'frommonth', $datefrom),
-                           'form-group fitem ml-2')
-                              . html_writer::div(html_writer::select_time('years', 'fromyear', $datefrom), 'form-group fitem ml-2')
-                              . html_writer::div(html_writer::select_time('hours', 'fromhour', $datefrom), 'form-group fitem ml-2')
+                           'mb-3 fitem ml-2')
+                              . html_writer::div(html_writer::select_time('years', 'fromyear', $datefrom), 'mb-3 fitem ml-2')
+                              . html_writer::div(html_writer::select_time('hours', 'fromhour', $datefrom), 'mb-3 fitem ml-2')
                               . html_writer::div(html_writer::select_time('minutes', 'fromminute', $datefrom),
-                           'form-group fitem ml-2');
+                           'mb-3 fitem ml-2');
 
-        $data->datetofields = html_writer::div(html_writer::select_time('days', 'today', $dateto), 'form-group fitem ml-2')
-                            . html_writer::div(html_writer::select_time('months', 'tomonth', $dateto), 'form-group fitem ml-2')
-                            . html_writer::div(html_writer::select_time('years', 'toyear', $dateto), 'form-group fitem ml-2')
-                            . html_writer::div(html_writer::select_time('hours', 'tohour', $dateto), 'form-group fitem ml-2')
-                            . html_writer::div(html_writer::select_time('minutes', 'tominute', $dateto), 'form-group fitem ml-2');
+        $data->datetofields = html_writer::div(html_writer::select_time('days', 'today', $dateto), 'mb-3 fitem ml-2')
+                            . html_writer::div(html_writer::select_time('months', 'tomonth', $dateto), 'mb-3 fitem ml-2')
+                            . html_writer::div(html_writer::select_time('years', 'toyear', $dateto), 'mb-3 fitem ml-2')
+                            . html_writer::div(html_writer::select_time('hours', 'tohour', $dateto), 'mb-3 fitem ml-2')
+                            . html_writer::div(html_writer::select_time('minutes', 'tominute', $dateto), 'mb-3 fitem ml-2');
 
         if ($this->forumid && !empty($this->forumoptions)) {
             foreach ($this->forumoptions as $index => $option) {
diff --git a/mod/glossary/editcategories.html b/mod/glossary/editcategories.html
index 450f5d0af7b..924197063d5 100644
--- a/mod/glossary/editcategories.html
+++ b/mod/glossary/editcategories.html
@@ -4,7 +4,7 @@
 ?>
 <div class="boxaligncenter">
 <form id="form" method="post" action="editcategories.php">
-    <div id="fitem_id_name" class="form-group row fitem">
+    <div id="fitem_id_name" class="mb-3 row fitem">
         <div class="col-md-3">
             <label class="col-form-label d-inline " for="name">
                 <?php echo get_string("name") ?>
@@ -14,7 +14,7 @@
             <input type="text" name="name" id="name" class="form-control" size="30" value="<?php p($name) ?>" />
         </div>
     </div>
-    <div id="fitem_id_usedynalink" class="form-group row fitem">
+    <div id="fitem_id_usedynalink" class="mb-3 row fitem">
         <div class="col-md-3">
             <span class="float-sm-right text-nowrap">
                 <?php echo $OUTPUT->help_icon('linkcategory', 'glossary') ?>
@@ -39,7 +39,7 @@
             </select>
         </div>
     </div>
-    <div id="fgroup_id_buttonar" class="form-group row fitem femptylabel" data-groupname="buttonar">
+    <div id="fgroup_id_buttonar" class="mb-3 row fitem femptylabel" data-groupname="buttonar">
         <div class="col-md-3">
             <span class="float-sm-right text-nowrap">
             </span>
@@ -47,7 +47,7 @@
             </label>
         </div>
         <div class="col-md-9 form-inline felement" data-fieldtype="group">
-            <div class="form-group fitem form-submit mr-1">
+            <div class="mb-3 fitem form-submit mr-1">
                 <label class="col-form-label" for="id_save">
                 </label>
                 <span data-fieldtype="submit">
@@ -61,7 +61,7 @@
                            value="<?php echo get_string("savechanges") ?>" />
                 </span>
             </div>
-            <div class="form-group fitem btn-cancel">
+            <div class="mb-3 fitem btn-cancel">
                 <label class="col-form-label" for="id_back">
                 </label>
                 <span data-fieldtype="submit">
diff --git a/question/bank/previewquestion/classes/form/preview_options_form.php b/question/bank/previewquestion/classes/form/preview_options_form.php
index 4d8b18af576..281df81877a 100644
--- a/question/bank/previewquestion/classes/form/preview_options_form.php
+++ b/question/bank/previewquestion/classes/form/preview_options_form.php
@@ -47,7 +47,7 @@ class preview_options_form extends moodleform {
         $mform->setExpanded('attemptoptionsheader', false);
         // Add html element with class to display long text in single line.
         $mform->addElement('html', \html_writer::div(get_string('theoptionsyouselectonlyaffectthepreview',
-            'qbank_previewquestion'), "col-md-12 row d-flex col-form-label form-group"));
+            'qbank_previewquestion'), "col-md-12 row d-flex col-form-label mb-3"));
         $versions = $this->_customdata['versions'];
         $versions[question_preview_options::ALWAYS_LATEST] = get_string('alwayslatest', 'qbank_previewquestion');
         $currentversion = $this->_customdata['restartversion'];
diff --git a/question/bank/tagquestion/templates/tag_condition.mustache b/question/bank/tagquestion/templates/tag_condition.mustache
index 76a50f20f0f..e9467a7d3a2 100644
--- a/question/bank/tagquestion/templates/tag_condition.mustache
+++ b/question/bank/tagquestion/templates/tag_condition.mustache
@@ -46,7 +46,7 @@
     }
 }}
 <div class="tag-condition-container" data-region="tag-condition-container-{{uniqid}}">
-    <div class="form-group">
+    <div class="mb-3">
         <select multiple name="qtagids[]" class="form-control invisible" size="3" data-region="tag-select">
             {{#tagoptions}}
                 <option {{#selected}}selected{{/selected}} value="{{id}}">{{name}}</option>
diff --git a/tag/templates/add_tag_collection.mustache b/tag/templates/add_tag_collection.mustache
index 7d766ce5ab6..2537dce3cac 100644
--- a/tag/templates/add_tag_collection.mustache
+++ b/tag/templates/add_tag_collection.mustache
@@ -37,7 +37,7 @@
 }}
 <form id="addtagcoll_form" method="post" action="{{actionurl}}" class="needs-validation">
     <input type="hidden" name="sesskey" value="{{sesskey}}"/>
-    <div class="form-group control-group" data-region="addtagcoll_nameinput">
+    <div class="mb-3 control-group" data-region="addtagcoll_nameinput">
         <label for="addtagcoll_name">
             {{#str}}name{{/str}}
             <span>
@@ -54,7 +54,7 @@
             </div>
         </div>
     </div>
-    <div class="form-group form-check">
+    <div class="mb-3 form-check">
         <input id="addtagcoll_searchable" name="searchable" type="checkbox" value="1" checked class="form-check-input"/>
         <label for="addtagcoll_searchable" class="form-check-label">{{#str}}searchable, tag{{/str}}</label>
     </div>
diff --git a/tag/templates/add_tags.mustache b/tag/templates/add_tags.mustache
index be3cb6f4677..f42b3083cbb 100644
--- a/tag/templates/add_tags.mustache
+++ b/tag/templates/add_tags.mustache
@@ -38,7 +38,7 @@
 <form id="addtags_form" method="post" action="{{actionurl}}" class="needs-validation">
     <input type="hidden" name="action" value="addstandardtag"/>
     <input type="hidden" name="sesskey" value="{{sesskey}}"/>
-    <div class="form-group control-group" data-region="tagslistinput">
+    <div class="mb-3 control-group" data-region="tagslistinput">
         <label for="id_tagslist">
             {{#str}}inputstandardtags, tag{{/str}}
             <span>
diff --git a/tag/templates/combine_tags.mustache b/tag/templates/combine_tags.mustache
index 835dcf0e2cc..5c6e6e87efb 100644
--- a/tag/templates/combine_tags.mustache
+++ b/tag/templates/combine_tags.mustache
@@ -49,7 +49,7 @@
 }}
 <form id="combinetags_form">
     <div class="description">{{#str}}selectmaintag, tag{{/str}}</div>
-    <div class="form-group options form-inline">
+    <div class="mb-3 options form-inline">
         {{#tags}}
             <div class="form-check w-100 justify-content-start">
                 <input type="radio" class="form-check-input" name="maintag" id="combinetags_maintag_{{id}}" value="{{id}}"/>
diff --git a/theme/boost/amd/build/form-display-errors.min.js b/theme/boost/amd/build/form-display-errors.min.js
index 1e415f4eb17..2ac0b7d0437 100644
--- a/theme/boost/amd/build/form-display-errors.min.js
+++ b/theme/boost/amd/build/form-display-errors.min.js
@@ -6,6 +6,6 @@
  * @copyright  2016 Damyon Wiese <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-define("theme_boost/form-display-errors",["jquery","core_form/events"],(function($,FormEvent){return{enhance:function(elementid){var element=document.getElementById(elementid);if(element){element.addEventListener(FormEvent.eventTypes.formFieldValidationFailed,(e=>{const msg=e.detail.message;e.preventDefault();var parent=$(element).closest(".form-group"),feedback=parent.find(".form-control-feedback");const feedbackId=feedback.attr("id");let describedBy=$(element).attr("aria-describedby");void 0===describedBy&&(describedBy="");let describedByIds=[];describedBy.length&&(describedByIds=describedBy.split(" "));const feedbackIndex=describedByIds.indexOf(feedbackId);"TEXTAREA"==$(element).prop("tagName")&&parent.find("[contenteditable]").length>0&&(element=parent.find("[contenteditable]")),""!==msg?(parent.addClass("has-danger"),parent.data("client-validation-error",!0),$(element).addClass("is-invalid"),-1===feedbackIndex&&(describedByIds.push(feedbackId),$(element).attr("aria-describedby",describedByIds.join(" "))),$(element).attr("aria-invalid",!0),feedback.attr("tabindex",0),feedback.html(msg),feedback.is(":visible")||(feedback.show(),feedback.focus())):!0===parent.data("client-validation-error")&&(parent.removeClass("has-danger"),parent.data("client-validation-error",!1),$(element).removeClass("is-invalid"),feedbackIndex>-1&&describedByIds.splice(feedbackIndex,1),describedByIds.length?(describedBy=describedByIds.join(" "),$(element).attr("aria-describedby",describedBy)):$(element).removeAttr("aria-describedby"),$(element).attr("aria-invalid",!1),feedback.hide())}));var form=element.closest("form");form&&!("boostFormErrorsEnhanced"in form.dataset)&&(form.addEventListener("submit",(function(){var visibleError=$(".form-control-feedback:visible");visibleError.length&&visibleError[0].focus()})),form.dataset.boostFormErrorsEnhanced=1)}}}}));
+define("theme_boost/form-display-errors",["jquery","core_form/events"],(function($,FormEvent){return{enhance:function(elementid){var element=document.getElementById(elementid);if(element){element.addEventListener(FormEvent.eventTypes.formFieldValidationFailed,(e=>{const msg=e.detail.message;e.preventDefault();var parent=$(element).closest(".fitem"),feedback=parent.find(".form-control-feedback");const feedbackId=feedback.attr("id");let describedBy=$(element).attr("aria-describedby");void 0===describedBy&&(describedBy="");let describedByIds=[];describedBy.length&&(describedByIds=describedBy.split(" "));const feedbackIndex=describedByIds.indexOf(feedbackId);"TEXTAREA"==$(element).prop("tagName")&&parent.find("[contenteditable]").length>0&&(element=parent.find("[contenteditable]")),""!==msg?(parent.addClass("has-danger"),parent.data("client-validation-error",!0),$(element).addClass("is-invalid"),-1===feedbackIndex&&(describedByIds.push(feedbackId),$(element).attr("aria-describedby",describedByIds.join(" "))),$(element).attr("aria-invalid",!0),feedback.attr("tabindex",0),feedback.html(msg),feedback.is(":visible")||(feedback.show(),feedback.focus())):!0===parent.data("client-validation-error")&&(parent.removeClass("has-danger"),parent.data("client-validation-error",!1),$(element).removeClass("is-invalid"),feedbackIndex>-1&&describedByIds.splice(feedbackIndex,1),describedByIds.length?(describedBy=describedByIds.join(" "),$(element).attr("aria-describedby",describedBy)):$(element).removeAttr("aria-describedby"),$(element).attr("aria-invalid",!1),feedback.hide())}));var form=element.closest("form");form&&!("boostFormErrorsEnhanced"in form.dataset)&&(form.addEventListener("submit",(function(){var visibleError=$(".form-control-feedback:visible");visibleError.length&&visibleError[0].focus()})),form.dataset.boostFormErrorsEnhanced=1)}}}}));
 
 //# sourceMappingURL=form-display-errors.min.js.map
\ No newline at end of file
diff --git a/theme/boost/amd/build/form-display-errors.min.js.map b/theme/boost/amd/build/form-display-errors.min.js.map
index 6eae4b67643..b1ad9cb0a83 100644
--- a/theme/boost/amd/build/form-display-errors.min.js.map
+++ b/theme/boost/amd/build/form-display-errors.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"form-display-errors.min.js","sources":["../src/form-display-errors.js"],"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 * Custom form error event handler to manipulate the bootstrap markup and show\n * nicely styled errors in an mform.\n *\n * @module     theme_boost/form-display-errors\n * @copyright  2016 Damyon Wiese <damyon@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine(['jquery', 'core_form/events'], function($, FormEvent) {\n    return {\n        /**\n         * Enhance the supplied element to handle form field errors.\n         *\n         * @method\n         * @param {String} elementid\n         * @listens event:formFieldValidationFailed\n         */\n        enhance: function(elementid) {\n            var element = document.getElementById(elementid);\n            if (!element) {\n                // Some elements (e.g. static) don't have a form field.\n                // Hence there is no validation. So, no setup required here.\n                return;\n            }\n\n            element.addEventListener(FormEvent.eventTypes.formFieldValidationFailed, e => {\n                const msg = e.detail.message;\n                e.preventDefault();\n\n                var parent = $(element).closest('.form-group');\n                var feedback = parent.find('.form-control-feedback');\n                const feedbackId = feedback.attr('id');\n\n                // Get current aria-describedby value.\n                let describedBy = $(element).attr('aria-describedby');\n                if (typeof describedBy === \"undefined\") {\n                    describedBy = '';\n                }\n                // Split aria-describedby attribute into an array of IDs if necessary.\n                let describedByIds = [];\n                if (describedBy.length) {\n                    describedByIds = describedBy.split(\" \");\n                }\n                // Find the the feedback container in the aria-describedby attribute.\n                const feedbackIndex = describedByIds.indexOf(feedbackId);\n\n                // Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.\n                if (($(element).prop(\"tagName\") == 'TEXTAREA') && parent.find('[contenteditable]').length > 0) {\n                    element = parent.find('[contenteditable]');\n                }\n                if (msg !== '') {\n                    parent.addClass('has-danger');\n                    parent.data('client-validation-error', true);\n                    $(element).addClass('is-invalid');\n                    // Append the feedback ID to the aria-describedby attribute if it doesn't exist yet.\n                    if (feedbackIndex === -1) {\n                        describedByIds.push(feedbackId);\n                        $(element).attr('aria-describedby', describedByIds.join(\" \"));\n                    }\n                    $(element).attr('aria-invalid', true);\n                    feedback.attr('tabindex', 0);\n                    feedback.html(msg);\n\n                    // Only display and focus when the error was not already visible.\n                    // This is so that, when tabbing around the form, you don't get stuck.\n                    if (!feedback.is(':visible')) {\n                        feedback.show();\n                        feedback.focus();\n                    }\n\n                } else {\n                    if (parent.data('client-validation-error') === true) {\n                        parent.removeClass('has-danger');\n                        parent.data('client-validation-error', false);\n                        $(element).removeClass('is-invalid');\n                        // If the aria-describedby attribute contains the error container's ID, remove it.\n                        if (feedbackIndex > -1) {\n                            describedByIds.splice(feedbackIndex, 1);\n                        }\n                        // Check the remaining element IDs in the aria-describedby attribute.\n                        if (describedByIds.length) {\n                            // If there's at least one, combine them with a blank space and update the aria-describedby attribute.\n                            describedBy = describedByIds.join(\" \");\n                            // Put back the new describedby attribute.\n                            $(element).attr('aria-describedby', describedBy);\n                        } else {\n                            // If there's none, remove the aria-describedby attribute.\n                            $(element).removeAttr('aria-describedby');\n                        }\n                        $(element).attr('aria-invalid', false);\n                        feedback.hide();\n                    }\n                }\n            });\n\n            var form = element.closest('form');\n            if (form && !('boostFormErrorsEnhanced' in form.dataset)) {\n                form.addEventListener('submit', function() {\n                    var visibleError = $('.form-control-feedback:visible');\n                    if (visibleError.length) {\n                        visibleError[0].focus();\n                    }\n                });\n                form.dataset.boostFormErrorsEnhanced = 1;\n            }\n        }\n    };\n});\n"],"names":["define","$","FormEvent","enhance","elementid","element","document","getElementById","addEventListener","eventTypes","formFieldValidationFailed","e","msg","detail","message","preventDefault","parent","closest","feedback","find","feedbackId","attr","describedBy","describedByIds","length","split","feedbackIndex","indexOf","prop","addClass","data","push","join","html","is","show","focus","removeClass","splice","removeAttr","hide","form","dataset","visibleError","boostFormErrorsEnhanced"],"mappings":";;;;;;;;AAuBAA,yCAAO,CAAC,SAAU,qBAAqB,SAASC,EAAGC,iBACxC,CAQHC,QAAS,SAASC,eACVC,QAAUC,SAASC,eAAeH,cACjCC,SAMLA,QAAQG,iBAAiBN,UAAUO,WAAWC,2BAA2BC,UAC/DC,IAAMD,EAAEE,OAAOC,QACrBH,EAAEI,qBAEEC,OAASf,EAAEI,SAASY,QAAQ,eAC5BC,SAAWF,OAAOG,KAAK,gCACrBC,WAAaF,SAASG,KAAK,UAG7BC,YAAcrB,EAAEI,SAASgB,KAAK,yBACP,IAAhBC,cACPA,YAAc,QAGdC,eAAiB,GACjBD,YAAYE,SACZD,eAAiBD,YAAYG,MAAM,YAGjCC,cAAgBH,eAAeI,QAAQP,YAGV,YAA9BnB,EAAEI,SAASuB,KAAK,YAA6BZ,OAAOG,KAAK,qBAAqBK,OAAS,IACxFnB,QAAUW,OAAOG,KAAK,sBAEd,KAARP,KACAI,OAAOa,SAAS,cAChBb,OAAOc,KAAK,2BAA2B,GACvC7B,EAAEI,SAASwB,SAAS,eAEG,IAAnBH,gBACAH,eAAeQ,KAAKX,YACpBnB,EAAEI,SAASgB,KAAK,mBAAoBE,eAAeS,KAAK,OAE5D/B,EAAEI,SAASgB,KAAK,gBAAgB,GAChCH,SAASG,KAAK,WAAY,GAC1BH,SAASe,KAAKrB,KAITM,SAASgB,GAAG,cACbhB,SAASiB,OACTjB,SAASkB,WAIkC,IAA3CpB,OAAOc,KAAK,6BACZd,OAAOqB,YAAY,cACnBrB,OAAOc,KAAK,2BAA2B,GACvC7B,EAAEI,SAASgC,YAAY,cAEnBX,eAAiB,GACjBH,eAAee,OAAOZ,cAAe,GAGrCH,eAAeC,QAEfF,YAAcC,eAAeS,KAAK,KAElC/B,EAAEI,SAASgB,KAAK,mBAAoBC,cAGpCrB,EAAEI,SAASkC,WAAW,oBAE1BtC,EAAEI,SAASgB,KAAK,gBAAgB,GAChCH,SAASsB,eAKjBC,KAAOpC,QAAQY,QAAQ,QACvBwB,QAAU,4BAA6BA,KAAKC,WAC5CD,KAAKjC,iBAAiB,UAAU,eACxBmC,aAAe1C,EAAE,kCACjB0C,aAAanB,QACbmB,aAAa,GAAGP,WAGxBK,KAAKC,QAAQE,wBAA0B"}
\ No newline at end of file
+{"version":3,"file":"form-display-errors.min.js","sources":["../src/form-display-errors.js"],"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 * Custom form error event handler to manipulate the bootstrap markup and show\n * nicely styled errors in an mform.\n *\n * @module     theme_boost/form-display-errors\n * @copyright  2016 Damyon Wiese <damyon@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine(['jquery', 'core_form/events'], function($, FormEvent) {\n    return {\n        /**\n         * Enhance the supplied element to handle form field errors.\n         *\n         * @method\n         * @param {String} elementid\n         * @listens event:formFieldValidationFailed\n         */\n        enhance: function(elementid) {\n            var element = document.getElementById(elementid);\n            if (!element) {\n                // Some elements (e.g. static) don't have a form field.\n                // Hence there is no validation. So, no setup required here.\n                return;\n            }\n\n            element.addEventListener(FormEvent.eventTypes.formFieldValidationFailed, e => {\n                const msg = e.detail.message;\n                e.preventDefault();\n\n                var parent = $(element).closest('.fitem');\n                var feedback = parent.find('.form-control-feedback');\n                const feedbackId = feedback.attr('id');\n\n                // Get current aria-describedby value.\n                let describedBy = $(element).attr('aria-describedby');\n                if (typeof describedBy === \"undefined\") {\n                    describedBy = '';\n                }\n                // Split aria-describedby attribute into an array of IDs if necessary.\n                let describedByIds = [];\n                if (describedBy.length) {\n                    describedByIds = describedBy.split(\" \");\n                }\n                // Find the the feedback container in the aria-describedby attribute.\n                const feedbackIndex = describedByIds.indexOf(feedbackId);\n\n                // Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.\n                if (($(element).prop(\"tagName\") == 'TEXTAREA') && parent.find('[contenteditable]').length > 0) {\n                    element = parent.find('[contenteditable]');\n                }\n                if (msg !== '') {\n                    parent.addClass('has-danger');\n                    parent.data('client-validation-error', true);\n                    $(element).addClass('is-invalid');\n                    // Append the feedback ID to the aria-describedby attribute if it doesn't exist yet.\n                    if (feedbackIndex === -1) {\n                        describedByIds.push(feedbackId);\n                        $(element).attr('aria-describedby', describedByIds.join(\" \"));\n                    }\n                    $(element).attr('aria-invalid', true);\n                    feedback.attr('tabindex', 0);\n                    feedback.html(msg);\n\n                    // Only display and focus when the error was not already visible.\n                    // This is so that, when tabbing around the form, you don't get stuck.\n                    if (!feedback.is(':visible')) {\n                        feedback.show();\n                        feedback.focus();\n                    }\n\n                } else {\n                    if (parent.data('client-validation-error') === true) {\n                        parent.removeClass('has-danger');\n                        parent.data('client-validation-error', false);\n                        $(element).removeClass('is-invalid');\n                        // If the aria-describedby attribute contains the error container's ID, remove it.\n                        if (feedbackIndex > -1) {\n                            describedByIds.splice(feedbackIndex, 1);\n                        }\n                        // Check the remaining element IDs in the aria-describedby attribute.\n                        if (describedByIds.length) {\n                            // If there's at least one, combine them with a blank space and update the aria-describedby attribute.\n                            describedBy = describedByIds.join(\" \");\n                            // Put back the new describedby attribute.\n                            $(element).attr('aria-describedby', describedBy);\n                        } else {\n                            // If there's none, remove the aria-describedby attribute.\n                            $(element).removeAttr('aria-describedby');\n                        }\n                        $(element).attr('aria-invalid', false);\n                        feedback.hide();\n                    }\n                }\n            });\n\n            var form = element.closest('form');\n            if (form && !('boostFormErrorsEnhanced' in form.dataset)) {\n                form.addEventListener('submit', function() {\n                    var visibleError = $('.form-control-feedback:visible');\n                    if (visibleError.length) {\n                        visibleError[0].focus();\n                    }\n                });\n                form.dataset.boostFormErrorsEnhanced = 1;\n            }\n        }\n    };\n});\n"],"names":["define","$","FormEvent","enhance","elementid","element","document","getElementById","addEventListener","eventTypes","formFieldValidationFailed","e","msg","detail","message","preventDefault","parent","closest","feedback","find","feedbackId","attr","describedBy","describedByIds","length","split","feedbackIndex","indexOf","prop","addClass","data","push","join","html","is","show","focus","removeClass","splice","removeAttr","hide","form","dataset","visibleError","boostFormErrorsEnhanced"],"mappings":";;;;;;;;AAuBAA,yCAAO,CAAC,SAAU,qBAAqB,SAASC,EAAGC,iBACxC,CAQHC,QAAS,SAASC,eACVC,QAAUC,SAASC,eAAeH,cACjCC,SAMLA,QAAQG,iBAAiBN,UAAUO,WAAWC,2BAA2BC,UAC/DC,IAAMD,EAAEE,OAAOC,QACrBH,EAAEI,qBAEEC,OAASf,EAAEI,SAASY,QAAQ,UAC5BC,SAAWF,OAAOG,KAAK,gCACrBC,WAAaF,SAASG,KAAK,UAG7BC,YAAcrB,EAAEI,SAASgB,KAAK,yBACP,IAAhBC,cACPA,YAAc,QAGdC,eAAiB,GACjBD,YAAYE,SACZD,eAAiBD,YAAYG,MAAM,YAGjCC,cAAgBH,eAAeI,QAAQP,YAGV,YAA9BnB,EAAEI,SAASuB,KAAK,YAA6BZ,OAAOG,KAAK,qBAAqBK,OAAS,IACxFnB,QAAUW,OAAOG,KAAK,sBAEd,KAARP,KACAI,OAAOa,SAAS,cAChBb,OAAOc,KAAK,2BAA2B,GACvC7B,EAAEI,SAASwB,SAAS,eAEG,IAAnBH,gBACAH,eAAeQ,KAAKX,YACpBnB,EAAEI,SAASgB,KAAK,mBAAoBE,eAAeS,KAAK,OAE5D/B,EAAEI,SAASgB,KAAK,gBAAgB,GAChCH,SAASG,KAAK,WAAY,GAC1BH,SAASe,KAAKrB,KAITM,SAASgB,GAAG,cACbhB,SAASiB,OACTjB,SAASkB,WAIkC,IAA3CpB,OAAOc,KAAK,6BACZd,OAAOqB,YAAY,cACnBrB,OAAOc,KAAK,2BAA2B,GACvC7B,EAAEI,SAASgC,YAAY,cAEnBX,eAAiB,GACjBH,eAAee,OAAOZ,cAAe,GAGrCH,eAAeC,QAEfF,YAAcC,eAAeS,KAAK,KAElC/B,EAAEI,SAASgB,KAAK,mBAAoBC,cAGpCrB,EAAEI,SAASkC,WAAW,oBAE1BtC,EAAEI,SAASgB,KAAK,gBAAgB,GAChCH,SAASsB,eAKjBC,KAAOpC,QAAQY,QAAQ,QACvBwB,QAAU,4BAA6BA,KAAKC,WAC5CD,KAAKjC,iBAAiB,UAAU,eACxBmC,aAAe1C,EAAE,kCACjB0C,aAAanB,QACbmB,aAAa,GAAGP,WAGxBK,KAAKC,QAAQE,wBAA0B"}
\ No newline at end of file
diff --git a/theme/boost/amd/src/form-display-errors.js b/theme/boost/amd/src/form-display-errors.js
index a9835d0b268..3cbd00bc893 100644
--- a/theme/boost/amd/src/form-display-errors.js
+++ b/theme/boost/amd/src/form-display-errors.js
@@ -42,7 +42,7 @@ define(['jquery', 'core_form/events'], function($, FormEvent) {
                 const msg = e.detail.message;
                 e.preventDefault();
 
-                var parent = $(element).closest('.form-group');
+                var parent = $(element).closest('.fitem');
                 var feedback = parent.find('.form-control-feedback');
                 const feedbackId = feedback.attr('id');
 
diff --git a/theme/boost/scss/moodle/backup-restore.scss b/theme/boost/scss/moodle/backup-restore.scss
index 98366c51092..ed1a75c4b19 100644
--- a/theme/boost/scss/moodle/backup-restore.scss
+++ b/theme/boost/scss/moodle/backup-restore.scss
@@ -53,7 +53,7 @@
         &:nth-of-type(even) {
             background-color: $card-bg;
         }
-        .form-group {
+        .fitem {
             /* These checkboxes with no label on the left. */
             .col-md-3.checkbox {
                 width: 0%;
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index b1edcb610ef..b3344a3f684 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -30,8 +30,8 @@
     textarea.form-control {
         width: 100%;
     }
-    .form-group {
-        margin: 0.1rem 0.25rem 0.1rem 0;
+    .fitem {
+        margin: 0.1rem 0.25rem 0.1rem 0 !important; /* stylelint-disable-line declaration-no-important */
     }
     br + label {
         justify-content: flex-start;
@@ -414,7 +414,7 @@ textarea[data-auto-rows] {
     }
 }
 
-[data-fieldtype="modgrade"] .form-group {
+[data-fieldtype="modgrade"] .fitem {
     padding-bottom: $input-padding-y;
 }
 
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index d5a492a822e..e7a36cdb04a 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -1208,7 +1208,7 @@ img.userpicture {
     width: auto;
     max-width: none;
 }
-#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
+#page-mod-quiz-mod #id_reviewoptionshdr .fitem {
     float: left;
     width: 20rem;
     display: inline-block;
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index 40d30a3735a..a03f4d6c5be 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -248,7 +248,7 @@ table.question-bank-table {
 
 body.path-question-type {
     /* Hacks to display the labels within a form group. */
-    .form-group .col-form-label.sr-only:not(legend):not([for="id_category"]) {
+    .fitem .col-form-label.sr-only:not(legend):not([for="id_category"]) {
         position: static;
         width: auto;
         height: auto;
diff --git a/theme/boost/scss/moodle/reportbuilder.scss b/theme/boost/scss/moodle/reportbuilder.scss
index 34e52cfa746..94722435518 100644
--- a/theme/boost/scss/moodle/reportbuilder.scss
+++ b/theme/boost/scss/moodle/reportbuilder.scss
@@ -63,7 +63,7 @@ $rb-filters-footer-height: 4rem;
             word-break: break-all;
         }
     }
-    .form-group[data-groupname="buttonar"] {
+    .fitem[data-groupname="buttonar"] {
         position: absolute;
         bottom: 0;
         height: $rb-filters-footer-height;
@@ -84,11 +84,11 @@ $rb-filters-footer-height: 4rem;
         .fdate_selector {
             flex-wrap: wrap;
         }
-        .form-group {
-            margin-bottom: 0;
+        .fitem {
+            margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
             max-width: 100%;
         }
-        .form-group:not(.row):last-child {
+        .fitem:not(.row):last-child {
             flex: 1;
             min-width: 0;
             span,
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 06cbfe8dccf..88415604dfe 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -32013,7 +32013,7 @@ table.question-bank-table .header.checkbox .form-check {
 body.path-question-type {
   /* Hacks to display the labels within a form group. */
 }
-body.path-question-type .form-group .col-form-label.sr-only:not(legend):not([for=id_category]) {
+body.path-question-type .fitem .col-form-label.sr-only:not(legend):not([for=id_category]) {
   position: static;
   width: auto;
   height: auto;
@@ -32900,8 +32900,8 @@ body.path-question-type .mform fieldset.hidden {
 .mform .form-inline textarea.form-control {
   width: 100%;
 }
-.mform .form-inline .form-group {
-  margin: 0.1rem 0.25rem 0.1rem 0;
+.mform .form-inline .fitem {
+  margin: 0.1rem 0.25rem 0.1rem 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .mform .form-inline br + label {
   justify-content: flex-start;
@@ -33261,7 +33261,7 @@ textarea[data-auto-rows] {
   }
 }
 
-[data-fieldtype=modgrade] .form-group {
+[data-fieldtype=modgrade] .fitem {
   padding-bottom: 0.375rem;
 }
 
@@ -34393,7 +34393,7 @@ img.userpicture {
   max-width: none;
 }
 
-#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
+#page-mod-quiz-mod #id_reviewoptionshdr .fitem {
   float: left;
   width: 20rem;
   display: inline-block;
@@ -34915,16 +34915,16 @@ img.userpicture {
 .path-backup .mform .grouped_settings:nth-of-type(even) {
   background-color: #fff;
 }
-.path-backup .mform .root_setting .form-group,
-.path-backup .mform .grouped_settings .form-group {
+.path-backup .mform .root_setting .fitem,
+.path-backup .mform .grouped_settings .fitem {
   /* These checkboxes with no label on the left. */
 }
-.path-backup .mform .root_setting .form-group .col-md-3.checkbox,
-.path-backup .mform .grouped_settings .form-group .col-md-3.checkbox {
+.path-backup .mform .root_setting .fitem .col-md-3.checkbox,
+.path-backup .mform .grouped_settings .fitem .col-md-3.checkbox {
   width: 0%;
 }
-.path-backup .mform .root_setting .form-group .col-md-9.checkbox,
-.path-backup .mform .grouped_settings .form-group .col-md-9.checkbox {
+.path-backup .mform .root_setting .fitem .col-md-9.checkbox,
+.path-backup .mform .grouped_settings .fitem .col-md-9.checkbox {
   width: 100%;
   left: 0;
 }
@@ -37705,13 +37705,13 @@ div.editor_atto_toolbar button .icon {
   text-overflow: clip;
   word-break: break-all;
 }
-.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] {
+.reportbuilder-filters-sidebar .fitem[data-groupname=buttonar] {
   position: absolute;
   bottom: 0;
   height: 4rem;
   align-items: center;
 }
-.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] .col-form-label {
+.reportbuilder-filters-sidebar .fitem[data-groupname=buttonar] .col-form-label {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -37719,20 +37719,20 @@ div.editor_atto_toolbar button .icon {
 .reportbuilder-conditions-list .mform.full-width-labels .fdate_selector {
   flex-wrap: wrap;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group {
-  margin-bottom: 0;
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem {
+  margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
   max-width: 100%;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child {
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child {
   flex: 1;
   min-width: 0;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child span,
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child .custom-select,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child span,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child .custom-select {
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child span,
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child .custom-select,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child span,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child .custom-select {
   width: 100%;
 }
 
diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt
index ca3f8893fe7..f327e12f29a 100644
--- a/theme/boost/upgrade.txt
+++ b/theme/boost/upgrade.txt
@@ -5,6 +5,7 @@ information provided here is intended especially for theme designers.
 * Bootstrap badge color helper clases (badge-[primary|secondary|...]) are no longer used, use bg-[primary|secondary|...] instead.
 * Bootstrap badge-pill is no longer used, use rounded-pill instead.
 * The bootstrap ´.media´ helper class has been replaced with utility classes (´d-flex´, ´flex-shrink-´, ´flex-grow-´, ...)
+* Bootstrap `.form-group` helper class is no longer used, use margin utilities instead (´mb-3´, ...).
 
 === 4.3 ===
 * The $activity-iconcontainer-height and $activity-iconcontainer-width variables have been changed from 50px to 52px.
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d6adb76f1e5..54eb041a062 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -32013,7 +32013,7 @@ table.question-bank-table .header.checkbox .form-check {
 body.path-question-type {
   /* Hacks to display the labels within a form group. */
 }
-body.path-question-type .form-group .col-form-label.sr-only:not(legend):not([for=id_category]) {
+body.path-question-type .fitem .col-form-label.sr-only:not(legend):not([for=id_category]) {
   position: static;
   width: auto;
   height: auto;
@@ -32900,8 +32900,8 @@ body.path-question-type .mform fieldset.hidden {
 .mform .form-inline textarea.form-control {
   width: 100%;
 }
-.mform .form-inline .form-group {
-  margin: 0.1rem 0.25rem 0.1rem 0;
+.mform .form-inline .fitem {
+  margin: 0.1rem 0.25rem 0.1rem 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .mform .form-inline br + label {
   justify-content: flex-start;
@@ -33261,7 +33261,7 @@ textarea[data-auto-rows] {
   }
 }
 
-[data-fieldtype=modgrade] .form-group {
+[data-fieldtype=modgrade] .fitem {
   padding-bottom: 0.375rem;
 }
 
@@ -34393,7 +34393,7 @@ img.userpicture {
   max-width: none;
 }
 
-#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
+#page-mod-quiz-mod #id_reviewoptionshdr .fitem {
   float: left;
   width: 20rem;
   display: inline-block;
@@ -34915,16 +34915,16 @@ img.userpicture {
 .path-backup .mform .grouped_settings:nth-of-type(even) {
   background-color: #fff;
 }
-.path-backup .mform .root_setting .form-group,
-.path-backup .mform .grouped_settings .form-group {
+.path-backup .mform .root_setting .fitem,
+.path-backup .mform .grouped_settings .fitem {
   /* These checkboxes with no label on the left. */
 }
-.path-backup .mform .root_setting .form-group .col-md-3.checkbox,
-.path-backup .mform .grouped_settings .form-group .col-md-3.checkbox {
+.path-backup .mform .root_setting .fitem .col-md-3.checkbox,
+.path-backup .mform .grouped_settings .fitem .col-md-3.checkbox {
   width: 0%;
 }
-.path-backup .mform .root_setting .form-group .col-md-9.checkbox,
-.path-backup .mform .grouped_settings .form-group .col-md-9.checkbox {
+.path-backup .mform .root_setting .fitem .col-md-9.checkbox,
+.path-backup .mform .grouped_settings .fitem .col-md-9.checkbox {
   width: 100%;
   left: 0;
 }
@@ -37639,13 +37639,13 @@ div.editor_atto_toolbar button .icon {
   text-overflow: clip;
   word-break: break-all;
 }
-.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] {
+.reportbuilder-filters-sidebar .fitem[data-groupname=buttonar] {
   position: absolute;
   bottom: 0;
   height: 4rem;
   align-items: center;
 }
-.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] .col-form-label {
+.reportbuilder-filters-sidebar .fitem[data-groupname=buttonar] .col-form-label {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -37653,20 +37653,20 @@ div.editor_atto_toolbar button .icon {
 .reportbuilder-conditions-list .mform.full-width-labels .fdate_selector {
   flex-wrap: wrap;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group {
-  margin-bottom: 0;
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem {
+  margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
   max-width: 100%;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child {
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child {
   flex: 1;
   min-width: 0;
 }
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child span,
-.reportbuilder-filters-wrapper .mform.full-width-labels .form-group:not(.row):last-child .custom-select,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child span,
-.reportbuilder-conditions-list .mform.full-width-labels .form-group:not(.row):last-child .custom-select {
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child span,
+.reportbuilder-filters-wrapper .mform.full-width-labels .fitem:not(.row):last-child .custom-select,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child span,
+.reportbuilder-conditions-list .mform.full-width-labels .fitem:not(.row):last-child .custom-select {
   width: 100%;
 }
 
diff --git a/theme/classic/tests/behat/behat_theme_classic_behat_admin.php b/theme/classic/tests/behat/behat_theme_classic_behat_admin.php
index e424776ed4c..c25e65ce8cb 100644
--- a/theme/classic/tests/behat/behat_theme_classic_behat_admin.php
+++ b/theme/classic/tests/behat/behat_theme_classic_behat_admin.php
@@ -82,7 +82,6 @@ class behat_theme_classic_behat_admin extends behat_admin {
                 // Multi element settings, interacting only the first one.
                 $fieldxpath = "//*[label[contains(., $label)]|span[contains(., $label)]]" .
                         "/ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' form-item ')]" .
-                        "/descendant::div[contains(concat(' ', @class, ' '), ' form-group ')]" .
                         "/descendant::*[self::input | self::textarea | self::select]" .
                         "[not(./@type = 'submit' or ./@type = 'image' or ./@type = 'hidden')]";
                 $fieldnode = $this->find('xpath', $fieldxpath);