From d0d62fd06c79fd43ab118b1c2fcf88700f162205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Wed, 13 Dec 2023 15:41:47 +0100
Subject: [PATCH] MDL-75670 theme: Refactor form-inline helper class dropped in
 BS5

- Replace .form-inline Bootstrap helper class with .d-flex.flex-wrap.align-items-center
- Refactor .form-inline occurrences in SCSS files or remove when unneeded
---
 .../classes/define_role_table_advanced.php    |  2 +-
 admin/roles/module.js                         |  2 +-
 admin/templates/header_search_input.mustache  |  2 +-
 .../templates/setting_configduration.mustache |  2 +-
 admin/templates/setting_configfile.mustache   |  2 +-
 .../templates/setting_configfilesize.mustache |  2 +-
 admin/templates/setting_configtime.mustache   |  2 +-
 .../hugo/site/layouts/_default/docs.html      |  2 +-
 .../lp/templates/competency_picker.mustache   |  2 +-
 .../competency_picker_competencyform.mustache |  2 +-
 .../competency_picker_user_plans.mustache     |  2 +-
 .../manage_competencies_page.mustache         |  2 +-
 admin/tool/spamcleaner/index.php              |  2 +-
 ...odle-availability_completion-form-debug.js |  2 +-
 ...moodle-availability_completion-form-min.js |  2 +-
 .../moodle-availability_completion-form.js    |  2 +-
 .../completion/yui/src/form/js/form.js        |  2 +-
 .../moodle-availability_grade-form-debug.js   |  2 +-
 .../moodle-availability_grade-form-min.js     |  2 +-
 .../moodle-availability_grade-form.js         |  2 +-
 .../condition/grade/yui/src/form/js/form.js   |  2 +-
 .../moodle-availability_group-form-debug.js   |  2 +-
 .../moodle-availability_group-form-min.js     |  2 +-
 .../moodle-availability_group-form.js         |  2 +-
 .../condition/group/yui/src/form/js/form.js   |  2 +-
 ...moodle-availability_grouping-form-debug.js |  2 +-
 .../moodle-availability_grouping-form-min.js  |  2 +-
 .../moodle-availability_grouping-form.js      |  2 +-
 .../grouping/yui/src/form/js/form.js          |  2 +-
 .../moodle-availability_profile-form-debug.js |  2 +-
 .../moodle-availability_profile-form-min.js   |  2 +-
 .../moodle-availability_profile-form.js       |  2 +-
 .../condition/profile/yui/src/form/js/form.js |  2 +-
 backup/util/ui/renderer.php                   |  4 +-
 course/templates/course_search_form.mustache  |  2 +-
 enrol/yui/rolemanager/rolemanager.js          |  3 +-
 .../singleview/templates/bulk_insert.mustache |  2 +-
 .../templates/weight_override_field.mustache  |  2 +-
 .../moodle-atto_image-button-debug.js         |  4 +-
 .../moodle-atto_image-button-min.js           |  4 +-
 .../moodle-atto_image-button.js               |  4 +-
 .../plugins/image/yui/src/button/js/button.js |  4 +-
 .../moodle-atto_media-button-debug.js         |  2 +-
 .../moodle-atto_media-button-min.js           |  4 +-
 .../moodle-atto_media-button.js               |  2 +-
 .../plugins/media/yui/src/button/js/button.js |  2 +-
 .../moodle-atto_table-button-debug.js         |  8 +--
 .../moodle-atto_table-button-min.js           |  6 +-
 .../moodle-atto_table-button.js               |  8 +--
 .../plugins/table/yui/src/button/js/button.js |  8 +--
 .../embed_media_modal_video.mustache          |  2 +-
 .../templates/insert_image_modal.mustache     |  4 +-
 lib/form/templates/element-template.mustache  |  2 +-
 lib/templates/dataformat_selector.mustache    |  2 +-
 lib/templates/filemanager_fileselect.mustache | 10 +--
 lib/templates/filemanager_loginform.mustache  |  2 +-
 lib/templates/search_input.mustache           |  2 +-
 lib/templates/search_input_auto.mustache      |  2 +-
 lib/templates/search_input_navbar.mustache    |  2 +-
 lib/templates/single_select.mustache          |  2 +-
 lib/templates/url_select.mustache             |  2 +-
 .../moodle-core-notification-confirm-debug.js |  8 ++-
 .../moodle-core-notification-confirm-min.js   |  2 +-
 .../moodle-core-notification-confirm.js       |  8 ++-
 lib/yui/src/notification/js/confirm.js        |  8 ++-
 .../search_input_recordings.mustache          |  2 +-
 mod/chat/gui_ajax/index.php                   | 21 +++---
 mod/data/field/date/field.class.php           |  4 +-
 mod/data/field/latlong/field.class.php        |  2 +-
 mod/data/field/url/field.class.php            |  2 +-
 mod/data/lib.php                              |  2 +-
 mod/forum/deprecatedlib.php                   |  4 +-
 .../templates/bulk_action_menu.mustache       |  2 +-
 mod/forum/templates/big_search_form.mustache  |  6 +-
 mod/forum/templates/forum_discussion.mustache |  2 +-
 .../forum_discussion_nested_v2.mustache       |  2 +-
 mod/glossary/editcategories.html              |  6 +-
 mod/lti/templates/tool_configure.mustache     |  2 +-
 mod/quiz/classes/output/edit_renderer.php     |  2 +-
 question/type/multianswer/renderer.php        |  2 +-
 question/type/numerical/renderer.php          |  2 +-
 question/type/shortanswer/renderer.php        |  2 +-
 report/courseoverview/index.php               |  3 +-
 report/participation/locallib.php             |  2 +-
 tag/templates/combine_tags.mustache           |  2 +-
 theme/boost/scss/moodle/course.scss           |  4 --
 theme/boost/scss/moodle/forms.scss            | 47 ++----------
 theme/boost/scss/moodle/modules.scss          | 16 -----
 theme/boost/scss/moodle/search.scss           |  2 +-
 theme/boost/style/moodle.css                  | 72 +++----------------
 theme/boost/upgrade.txt                       |  1 +
 theme/classic/style/moodle.css                | 72 +++----------------
 user/index.php                                |  2 +-
 user/selector/lib.php                         |  2 +-
 94 files changed, 165 insertions(+), 318 deletions(-)

diff --git a/admin/roles/classes/define_role_table_advanced.php b/admin/roles/classes/define_role_table_advanced.php
index 57b449f7aa2..632cb3e39a6 100644
--- a/admin/roles/classes/define_role_table_advanced.php
+++ b/admin/roles/classes/define_role_table_advanced.php
@@ -663,7 +663,7 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         } else {
             $extraclass = '';
         }
-        echo '<div class="felement col-md-9 form-inline' . $extraclass . '">';
+        echo '<div class="felement col-md-9 d-flex flex-wrap align-items-center' . $extraclass . '">';
         echo $field;
         if (isset($this->errors[$name])) {
             echo $OUTPUT->error_text($this->errors[$name]);
diff --git a/admin/roles/module.js b/admin/roles/module.js
index e161948c957..9a249176336 100644
--- a/admin/roles/module.js
+++ b/admin/roles/module.js
@@ -45,7 +45,7 @@ M.core_role.init_cap_table_filter = function(Y, tableid, contextid) {
             this.table = Y.one('#'+this.tableid);
 
             // Create a div to hold the search UI.
-            this.div = Y.Node.create('<div class="capabilitysearchui form-inline"></div>').setStyles({
+            this.div = Y.Node.create('<div class="capabilitysearchui d-flex flex-wrap align-items-center"></div>').setStyles({
                 width : this.table.get('offsetWidth'),
                 marginLeft : 'auto',
                 marginRight : 'auto'
diff --git a/admin/templates/header_search_input.mustache b/admin/templates/header_search_input.mustache
index 51a6386f105..eed7f6a2971 100644
--- a/admin/templates/header_search_input.mustache
+++ b/admin/templates/header_search_input.mustache
@@ -26,7 +26,7 @@
     }
 }}
 <div class="simplesearchform d-flex justify-content-end">
-  <form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform form-inline simplesearchform">
+  <form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center simplesearchform">
     <div class="input-group">
       <label for="searchinput-{{uniqid}}">
         <span class="sr-only">{{#str}} search, core {{/str}}</span>
diff --git a/admin/templates/setting_configduration.mustache b/admin/templates/setting_configduration.mustache
index 1a880c10d81..363830f60dc 100644
--- a/admin/templates/setting_configduration.mustache
+++ b/admin/templates/setting_configduration.mustache
@@ -39,7 +39,7 @@
     Setting configduration.
 }}
 <div class="form-duration defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
         <label class="sr-only" for="{{id}}u">{{#str}}durationunits, admin{{/str}}</label>
         <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>
diff --git a/admin/templates/setting_configfile.mustache b/admin/templates/setting_configfile.mustache
index 15a45ce70a6..1e68c849020 100644
--- a/admin/templates/setting_configfile.mustache
+++ b/admin/templates/setting_configfile.mustache
@@ -44,7 +44,7 @@
     Setting configfile.
 }}
 <div class="form-file defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" name="{{name}}" id="{{id}}" size="{{size}}" value="{{value}}" class="form-control text-ltr" {{#readonly}}readonly{{/readonly}}>
         {{#showvalidity}}
             {{#valid}}
diff --git a/admin/templates/setting_configfilesize.mustache b/admin/templates/setting_configfilesize.mustache
index 355cc6d52ef..7fe1f0f2474 100644
--- a/admin/templates/setting_configfilesize.mustache
+++ b/admin/templates/setting_configfilesize.mustache
@@ -39,7 +39,7 @@
     Setting configfilesize.
 }}
 <div class="form-filesize defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
         <label class="sr-only" for="{{id}}u">{{#str}}filesizeunits, admin{{/str}}</label>
         <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>
diff --git a/admin/templates/setting_configtime.mustache b/admin/templates/setting_configtime.mustache
index af4435ae484..48b0b66c57b 100644
--- a/admin/templates/setting_configtime.mustache
+++ b/admin/templates/setting_configtime.mustache
@@ -45,7 +45,7 @@
     Setting configtime.
 }}
 <div class="form-time defaultsnext">
-    <div class="form-inline text-ltr">
+    <div class="d-flex flex-wrap align-items-center text-ltr">
         <label class="sr-only" for="{{id}}h">{{#str}}hours{{/str}}</label>
         <select id="{{id}}h" name="{{name}}[h]" class="custom-select" {{#readonly}}disabled{{/readonly}}>
             {{#hours}}
diff --git a/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html b/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
index cb6a8e43813..93c3b7c9938 100644
--- a/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
+++ b/admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
@@ -6,7 +6,7 @@
             <div class="controls d-flex justify-content-between">
                 <div class="simplesearchform w-100">
                     <form autocomplete="off" method="get" accept-charset="utf-8"
-                        class="mform form-inline simplesearchform p-2 justify-content-center">
+                        class="mform d-flex flex-wrap align-items-center simplesearchform p-2 justify-content-center">
                         <div class="input-group w-100" data-region="docsearch">
                             <label for="searchinput-componentlibrary">
                                 <span class="sr-only">Search component library</span>
diff --git a/admin/tool/lp/templates/competency_picker.mustache b/admin/tool/lp/templates/competency_picker.mustache
index 43e5950ea9a..12c382619e6 100644
--- a/admin/tool/lp/templates/competency_picker.mustache
+++ b/admin/tool/lp/templates/competency_picker.mustache
@@ -62,7 +62,7 @@
 {{/singleFramework}}
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
+<form data-region="filtercompetencies" class="d-flex flex-wrap align-items-center" data-frameworkid="{{framework.id}}">
     <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}}">
diff --git a/admin/tool/lp/templates/competency_picker_competencyform.mustache b/admin/tool/lp/templates/competency_picker_competencyform.mustache
index 3ef8c8d6340..e1a417a367d 100644
--- a/admin/tool/lp/templates/competency_picker_competencyform.mustache
+++ b/admin/tool/lp/templates/competency_picker_competencyform.mustache
@@ -44,7 +44,7 @@
 <div data-region="competencylinktree">
 <h3>{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
+<form data-region="filtercompetencies" class="d-flex flex-wrap align-items-center" data-frameworkid="{{framework.id}}">
     <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}}">
diff --git a/admin/tool/lp/templates/competency_picker_user_plans.mustache b/admin/tool/lp/templates/competency_picker_user_plans.mustache
index afd5c5ca9ee..3e367b4cba5 100644
--- a/admin/tool/lp/templates/competency_picker_user_plans.mustache
+++ b/admin/tool/lp/templates/competency_picker_user_plans.mustache
@@ -66,7 +66,7 @@
 
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" data-planid="{{plan.id}}" class="form-inline">
+<form data-region="filtercompetencies" data-planid="{{plan.id}}" class="d-flex flex-wrap align-items-center">
     <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}}">
diff --git a/admin/tool/lp/templates/manage_competencies_page.mustache b/admin/tool/lp/templates/manage_competencies_page.mustache
index 1c2cd1117ca..22eeb89ed6a 100644
--- a/admin/tool/lp/templates/manage_competencies_page.mustache
+++ b/admin/tool/lp/templates/manage_competencies_page.mustache
@@ -49,7 +49,7 @@
     <div class="row">
         <div class="col-lg-6">
             <p>
-                <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="form-inline">
+                <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="d-flex flex-wrap align-items-center">
                     <div class="input-group mb-3">
                         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
                         <input class="form-control" type="text" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
diff --git a/admin/tool/spamcleaner/index.php b/admin/tool/spamcleaner/index.php
index ce017f6300b..27d00d5f2d4 100644
--- a/admin/tool/spamcleaner/index.php
+++ b/admin/tool/spamcleaner/index.php
@@ -95,7 +95,7 @@ echo $OUTPUT->box_start();     // The forms section at the top
 
 <div class="mdl-align">
 
-<form method="post" action="index.php" class="form-inline spamcleanerform">
+<form method="post" action="index.php" class="d-flex flex-wrap align-items-center spamcleanerform">
   <div>
     <label class="accesshide" for="keyword_el"><?php print_string('spamkeyword', 'tool_spamcleaner') ?></label>
     <input type="text" class="form-control" name="keyword" id="keyword_el" value="<?php p($keyword) ?>" />
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 0f5d4c5b1a5..8842d8d5e4c 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
@@ -44,7 +44,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&
diff --git a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
index 06805c7054d..faa99051ac1 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_completion-form",function(o,e){M.availability_completion=M.availability_completion||{},M.availability_completion.form=o.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(e){for(var i,l,t='<span class="col-form-label pr-3"> '+M.util.get_string("title","availability_completion")+'</span> <span class="availability-group form-group"><label><span class="accesshide">'+M.util.get_string("label_cm","availability_completion")+' </span><select class="custom-select" name="cm" title="'+M.util.get_string("label_cm","availability_completion")+'"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>",a=0;a<this.cms.length;a++)t+='<option value="'+(i=this.cms[a]).id+'">'+i.name+"</option>";return t+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_completion","availability_completion")+' </span><select class="custom-select" name="e" title="'+M.util.get_string("label_completion","availability_completion")+'"><option value="1">'+M.util.get_string("option_complete","availability_completion")+'</option><option value="0">'+M.util.get_string("option_incomplete","availability_completion")+'</option><option value="2">'+M.util.get_string("option_pass","availability_completion")+'</option><option value="3">'+M.util.get_string("option_fail","availability_completion")+"</option></select></label></span>",l=o.Node.create('<span class="form-inline">'+t+"</span>"),e.cm!==undefined&&l.one("select[name=cm] > option[value="+e.cm+"]")&&l.one("select[name=cm]").set("value",""+e.cm),e.e!==undefined&&l.one("select[name=e]").set("value",""+e.e),M.availability_completion.form.addedEvents||(M.availability_completion.form.addedEvents=!0,o.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_completion select")),l},M.availability_completion.form.fillValue=function(e,i){e.cm=parseInt(i.one("select[name=cm]").get("value"),10),e.e=parseInt(i.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(i,e){var l=parseInt(e.one("select[name=cm]").get("value"),10);0===l&&i.push("availability_completion:error_selectcmid"),2!==(e=parseInt(e.one("select[name=e]").get("value"),10))&&3!==e||this.cms.forEach(function(e){e.id===l&&null===e.completiongradeitemnumber&&i.push("availability_completion:error_selectcmidpassfail")})}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_completion-form",function(o,e){M.availability_completion=M.availability_completion||{},M.availability_completion.form=o.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(e){for(var i,l,t='<span class="col-form-label pr-3"> '+M.util.get_string("title","availability_completion")+'</span> <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>",a=0;a<this.cms.length;a++)t+='<option value="'+(i=this.cms[a]).id+'">'+i.name+"</option>";return t+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_completion","availability_completion")+' </span><select class="custom-select" name="e" title="'+M.util.get_string("label_completion","availability_completion")+'"><option value="1">'+M.util.get_string("option_complete","availability_completion")+'</option><option value="0">'+M.util.get_string("option_incomplete","availability_completion")+'</option><option value="2">'+M.util.get_string("option_pass","availability_completion")+'</option><option value="3">'+M.util.get_string("option_fail","availability_completion")+"</option></select></label></span>",l=o.Node.create('<span class="d-flex flex-wrap align-items-center">'+t+"</span>"),e.cm!==undefined&&l.one("select[name=cm] > option[value="+e.cm+"]")&&l.one("select[name=cm]").set("value",""+e.cm),e.e!==undefined&&l.one("select[name=e]").set("value",""+e.e),M.availability_completion.form.addedEvents||(M.availability_completion.form.addedEvents=!0,o.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_completion select")),l},M.availability_completion.form.fillValue=function(e,i){e.cm=parseInt(i.one("select[name=cm]").get("value"),10),e.e=parseInt(i.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(i,e){var l=parseInt(e.one("select[name=cm]").get("value"),10);0===l&&i.push("availability_completion:error_selectcmid"),2!==(e=parseInt(e.one("select[name=e]").get("value"),10))&&3!==e||this.cms.forEach(function(e){e.id===l&&null===e.completiongradeitemnumber&&i.push("availability_completion:error_selectcmidpassfail")})}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
index 0f5d4c5b1a5..8842d8d5e4c 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
@@ -44,7 +44,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&
diff --git a/availability/condition/completion/yui/src/form/js/form.js b/availability/condition/completion/yui/src/form/js/form.js
index 97b8f1aaffc..437cb7c1a64 100644
--- a/availability/condition/completion/yui/src/form/js/form.js
+++ b/availability/condition/completion/yui/src/form/js/form.js
@@ -42,7 +42,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&
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 66d4aac8892..518e96f30e7 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
@@ -57,7 +57,7 @@ M.availability_grade.form.getNode = function(json) {
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<div class="d-inline-block form-inline">' + html + '</div>');
+    var node = Y.Node.create('<div class="d-inline-block d-flex flex-wrap align-items-center">' + html + '</div>');
 
     // Set initial values.
     if (json.id !== undefined &&
diff --git a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
index 2e8fe8c5a40..6253c99a676 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_grade-form",function(r,a){M.availability_grade=M.availability_grade||{},M.availability_grade.form=r.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(a){this.grades=a,this.nodesSoFar=0},M.availability_grade.form.getNode=function(a){var e,i,l,t,n;for(this.nodesSoFar++,e='<label class="form-group"><span class="pr-3">'+M.util.get_string("title","availability_grade")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>",i=0;i<this.grades.length;i++)e+='<option value="'+(l=this.grades[i]).id+'">'+l.name+"</option>";return e+='</select></span></label> <br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="min"/>'+M.util.get_string("option_min","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_min","availability_grade")+'</span><input type="text" class="form-control mx-1" name="minval" title="'+M.util.get_string("label_min","availability_grade")+'"/></label>%</span><br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input mx-1" name="max"/>'+M.util.get_string("option_max","availability_grade")+'</label> <label><span class="accesshide">'+M.util.get_string("label_max","availability_grade")+'</span><input type="text" class="form-control mx-1" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>',t=r.Node.create('<div class="d-inline-block form-inline">'+e+"</div>"),a.id!==undefined&&t.one("select[name=id] > option[value="+a.id+"]")&&t.one("select[name=id]").set("value",""+a.id),a.min!==undefined&&(t.one("input[name=min]").set("checked",!0),t.one("input[name=minval]").set("value",a.min)),a.max!==undefined&&(t.one("input[name=max]").set("checked",!0),t.one("input[name=maxval]").set("value",a.max)),n=function(a,e){var i=a.ancestor("label").next("label").one("input"),a=a.get("checked");return i.set("disabled",!a),e&&a&&i.focus(),a},t.all("input[type=checkbox]").each(n),M.availability_grade.form.addedEvents||(M.availability_grade.form.addedEvents=!0,(a=r.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),a.delegate("click",function(){n(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),a.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")),t},M.availability_grade.form.fillValue=function(a,e){a.id=parseInt(e.one("select[name=id]").get("value"),10),e.one("input[name=min]").get("checked")&&(a.min=this.getValue("minval",e)),e.one("input[name=max]").get("checked")&&(a.max=this.getValue("maxval",e))},M.availability_grade.form.getValue=function(a,e){a=e.one("input[name="+a+"]").get("value");return!/^[0-9]+([.,][0-9]+)?$/.test(a)||(e=parseFloat(a.replace(",",".")))<0||100<e?a:e},M.availability_grade.form.fillErrors=function(a,e){var i={};this.fillValue(i,e),0===i.id&&a.push("availability_grade:error_selectgradeid"),i.min!==undefined&&"string"==typeof i.min||i.max!==undefined&&"string"==typeof i.max?a.push("availability_grade:error_invalidnumber"):i.min!==undefined&&i.max!==undefined&&i.max<=i.min&&a.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_grade-form",function(r,a){M.availability_grade=M.availability_grade||{},M.availability_grade.form=r.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(a){this.grades=a,this.nodesSoFar=0},M.availability_grade.form.getNode=function(a){var e,i,l,t,n;for(this.nodesSoFar++,e='<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>",i=0;i<this.grades.length;i++)e+='<option value="'+(l=this.grades[i]).id+'">'+l.name+"</option>";return e+='</select></span></label> <br><span class="availability-group 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 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")+'</span><input type="text" class="form-control mx-1" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>',t=r.Node.create('<div class="d-inline-block d-flex flex-wrap align-items-center">'+e+"</div>"),a.id!==undefined&&t.one("select[name=id] > option[value="+a.id+"]")&&t.one("select[name=id]").set("value",""+a.id),a.min!==undefined&&(t.one("input[name=min]").set("checked",!0),t.one("input[name=minval]").set("value",a.min)),a.max!==undefined&&(t.one("input[name=max]").set("checked",!0),t.one("input[name=maxval]").set("value",a.max)),n=function(a,e){var i=a.ancestor("label").next("label").one("input"),a=a.get("checked");return i.set("disabled",!a),e&&a&&i.focus(),a},t.all("input[type=checkbox]").each(n),M.availability_grade.form.addedEvents||(M.availability_grade.form.addedEvents=!0,(a=r.one(".availability-field")).delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),a.delegate("click",function(){n(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),a.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")),t},M.availability_grade.form.fillValue=function(a,e){a.id=parseInt(e.one("select[name=id]").get("value"),10),e.one("input[name=min]").get("checked")&&(a.min=this.getValue("minval",e)),e.one("input[name=max]").get("checked")&&(a.max=this.getValue("maxval",e))},M.availability_grade.form.getValue=function(a,e){a=e.one("input[name="+a+"]").get("value");return!/^[0-9]+([.,][0-9]+)?$/.test(a)||(e=parseFloat(a.replace(",",".")))<0||100<e?a:e},M.availability_grade.form.fillErrors=function(a,e){var i={};this.fillValue(i,e),0===i.id&&a.push("availability_grade:error_selectgradeid"),i.min!==undefined&&"string"==typeof i.min||i.max!==undefined&&"string"==typeof i.max?a.push("availability_grade:error_invalidnumber"):i.min!==undefined&&i.max!==undefined&&i.max<=i.min&&a.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
index 66d4aac8892..518e96f30e7 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
@@ -57,7 +57,7 @@ M.availability_grade.form.getNode = function(json) {
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<div class="d-inline-block form-inline">' + html + '</div>');
+    var node = Y.Node.create('<div class="d-inline-block d-flex flex-wrap align-items-center">' + html + '</div>');
 
     // Set initial values.
     if (json.id !== undefined &&
diff --git a/availability/condition/grade/yui/src/form/js/form.js b/availability/condition/grade/yui/src/form/js/form.js
index 15515a8b6c0..b12aa47dc6d 100644
--- a/availability/condition/grade/yui/src/form/js/form.js
+++ b/availability/condition/grade/yui/src/form/js/form.js
@@ -55,7 +55,7 @@ M.availability_grade.form.getNode = function(json) {
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<div class="d-inline-block form-inline">' + html + '</div>');
+    var node = Y.Node.create('<div class="d-inline-block d-flex flex-wrap align-items-center">' + html + '</div>');
 
     // Set initial values.
     if (json.id !== undefined &&
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
index f8a97f606c0..f1761747261 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
@@ -44,7 +44,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '" data-visibility="' + group.visibility + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     var select = node.one('select[name=id]');
 
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
index 9728d435daa..66c412d3e72 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_group-form",function(r,i){M.availability_group=M.availability_group||{},M.availability_group.form=r.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(i){this.groups=i},M.availability_group.form.getNode=function(i){for(var a,e,t,l,o='<label><span class="pr-3">'+M.util.get_string("title","availability_group")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+'</option><option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>",n=0;n<this.groups.length;n++)o+='<option value="'+(a=this.groups[n]).id+'" data-visibility="'+a.visibility+'">'+a.name+"</option>";return(t=(e=r.Node.create('<span class="form-inline">'+(o+="</select></span></label>")+"</span>")).one("select[name=id]")).on("change",function(i){var a=i.target.get("value"),a=i.target.one("option[value="+a+"]").get("dataset").visibility,i=0<a?"availability:privateRuleSet":"availability:privateRuleUnset";e.fire(i,{plugin:"group"})}),i.creating===undefined&&(i.id!==undefined?(l=t.one("option[value="+i.id+"]"))&&(t.set("value",""+i.id),0<l.get("dataset").visibility&&window.setTimeout(function(){e.fire("availability:privateRuleSet",{plugin:"group"})},0)):i.id===undefined&&e.one("select[name=id]").set("value","any")),M.availability_group.form.addedEvents||(M.availability_group.form.addedEvents=!0,r.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_group select")),e},M.availability_group.form.fillValue=function(i,a){a=a.one("select[name=id]").get("value");"choose"===a?i.id="choose":"any"!==a&&(i.id=parseInt(a,10))},M.availability_group.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),e.id&&"choose"===e.id&&i.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_group-form",function(r,i){M.availability_group=M.availability_group||{},M.availability_group.form=r.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(i){this.groups=i},M.availability_group.form.getNode=function(i){for(var a,e,t,l,o='<label><span class="pr-3">'+M.util.get_string("title","availability_group")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+'</option><option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>",n=0;n<this.groups.length;n++)o+='<option value="'+(a=this.groups[n]).id+'" data-visibility="'+a.visibility+'">'+a.name+"</option>";return(t=(e=r.Node.create('<span class="d-flex flex-wrap align-items-center">'+(o+="</select></span></label>")+"</span>")).one("select[name=id]")).on("change",function(i){var a=i.target.get("value"),a=i.target.one("option[value="+a+"]").get("dataset").visibility,i=0<a?"availability:privateRuleSet":"availability:privateRuleUnset";e.fire(i,{plugin:"group"})}),i.creating===undefined&&(i.id!==undefined?(l=t.one("option[value="+i.id+"]"))&&(t.set("value",""+i.id),0<l.get("dataset").visibility&&window.setTimeout(function(){e.fire("availability:privateRuleSet",{plugin:"group"})},0)):i.id===undefined&&e.one("select[name=id]").set("value","any")),M.availability_group.form.addedEvents||(M.availability_group.form.addedEvents=!0,r.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_group select")),e},M.availability_group.form.fillValue=function(i,a){a=a.one("select[name=id]").get("value");"choose"===a?i.id="choose":"any"!==a&&(i.id=parseInt(a,10))},M.availability_group.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),e.id&&"choose"===e.id&&i.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
index f8a97f606c0..f1761747261 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
@@ -44,7 +44,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '" data-visibility="' + group.visibility + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     var select = node.one('select[name=id]');
 
diff --git a/availability/condition/group/yui/src/form/js/form.js b/availability/condition/group/yui/src/form/js/form.js
index 919cddae3e8..ad5445066a5 100644
--- a/availability/condition/group/yui/src/form/js/form.js
+++ b/availability/condition/group/yui/src/form/js/form.js
@@ -42,7 +42,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '" data-visibility="' + group.visibility + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     var select = node.one('select[name=id]');
 
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
index 1eb8f260d97..77211376e4b 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
@@ -43,7 +43,7 @@ M.availability_grouping.form.getNode = function(json) {
         html += '<option value="' + grouping.id + '">' + grouping.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial value if specified.
     if (json.id !== undefined &&
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
index c07e5f1725e..885a34a0e83 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_grouping-form",function(n,i){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=n.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(i){this.groupings=i},M.availability_grouping.form.getNode=function(i){for(var a,e,l='<label><span class="pr-3">'+M.util.get_string("title","availability_grouping")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",o=0;o<this.groupings.length;o++)l+='<option value="'+(a=this.groupings[o]).id+'">'+a.name+"</option>";return e=n.Node.create('<span class="form-inline">'+(l+="</select></span></label>")+"</span>"),i.id!==undefined&&e.one("select[name=id] > option[value="+i.id+"]")&&e.one("select[name=id]").set("value",""+i.id),M.availability_grouping.form.addedEvents||(M.availability_grouping.form.addedEvents=!0,n.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")),e},M.availability_grouping.form.fillValue=function(i,a){a=a.one("select[name=id]").get("value");i.id="choose"===a?"choose":parseInt(a,10)},M.availability_grouping.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),"choose"===e.id&&i.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_grouping-form",function(n,i){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=n.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(i){this.groupings=i},M.availability_grouping.form.getNode=function(i){for(var a,e,l='<label><span class="pr-3">'+M.util.get_string("title","availability_grouping")+'</span> <span class="availability-group"><select name="id" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",o=0;o<this.groupings.length;o++)l+='<option value="'+(a=this.groupings[o]).id+'">'+a.name+"</option>";return e=n.Node.create('<span class="d-flex flex-wrap align-items-center">'+(l+="</select></span></label>")+"</span>"),i.id!==undefined&&e.one("select[name=id] > option[value="+i.id+"]")&&e.one("select[name=id]").set("value",""+i.id),M.availability_grouping.form.addedEvents||(M.availability_grouping.form.addedEvents=!0,n.one(".availability-field").delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")),e},M.availability_grouping.form.fillValue=function(i,a){a=a.one("select[name=id]").get("value");i.id="choose"===a?"choose":parseInt(a,10)},M.availability_grouping.form.fillErrors=function(i,a){var e={};this.fillValue(e,a),"choose"===e.id&&i.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
index 1eb8f260d97..77211376e4b 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
@@ -43,7 +43,7 @@ M.availability_grouping.form.getNode = function(json) {
         html += '<option value="' + grouping.id + '">' + grouping.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial value if specified.
     if (json.id !== undefined &&
diff --git a/availability/condition/grouping/yui/src/form/js/form.js b/availability/condition/grouping/yui/src/form/js/form.js
index f8e596facd1..d0f744a55c7 100644
--- a/availability/condition/grouping/yui/src/form/js/form.js
+++ b/availability/condition/grouping/yui/src/form/js/form.js
@@ -41,7 +41,7 @@ M.availability_grouping.form.getNode = function(json) {
         html += '<option value="' + grouping.id + '">' + grouping.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial value if specified.
     if (json.id !== undefined &&
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
index c4fb5a4295e..4aa2f266372 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
@@ -62,7 +62,7 @@ M.availability_profile.form.getNode = function(json) {
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
             '</span><input name="value" type="text" class="form-control" style="width: 10em" title="' +
             M.util.get_string('label_value', 'availability_profile') + '"/></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values if specified.
     if (json.sf !== undefined &&
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
index 004d9f7f826..313ddd5f097 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_profile-form",function(n,e){M.availability_profile=M.availability_profile||{},M.availability_profile.form=n.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,i){this.standardFields=e,this.customFields=i},M.availability_profile.form.getNode=function(e){for(var i,l,a,t,o='<span class="availability-group"><label><span class="pr-3">'+M.util.get_string("conditiontitle","availability_profile")+'</span> <select name="field" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",s=0;s<this.standardFields.length;s++)o+='<option value="sf_'+(i=this.standardFields[s]).field+'">'+i.display+"</option>";for(s=0;s<this.customFields.length;s++)o+='<option value="cf_'+(i=this.customFields[s]).field+'">'+i.display+"</option>";for(o+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'" class="custom-select">',l=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"],s=0;s<l.length;s++)o+='<option value="'+l[s]+'">'+M.util.get_string("op_"+l[s],"availability_profile")+"</option>";return o+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" class="form-control" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>',a=n.Node.create('<span class="form-inline">'+o+"</span>"),e.sf!==undefined&&a.one("select[name=field] > option[value=sf_"+e.sf+"]")?a.one("select[name=field]").set("value","sf_"+e.sf):e.cf!==undefined&&a.one("select[name=field] > option[value=cf_"+e.cf+"]")&&a.one("select[name=field]").set("value","cf_"+e.cf),e.op!==undefined&&a.one("select[name=op] > option[value="+e.op+"]")&&(a.one("select[name=op]").set("value",e.op),"isempty"!==e.op&&"isnotempty"!==e.op||a.one("input[name=value]").set("disabled",!0)),e.v!==undefined&&a.one("input").set("value",e.v),M.availability_profile.form.addedEvents||(M.availability_profile.form.addedEvents=!0,t=function(e){var e=e.ancestor("span.availability_profile"),i=e.one("select[name=op]"),i="isempty"===i.get("value")||"isnotempty"===i.get("value");e.one("input[name=value]").set("disabled",i),M.core_availability.form.update()},(e=n.one(".availability-field")).delegate("change",function(){t(this)},".availability_profile select"),e.delegate("change",function(){t(this)},".availability_profile input[name=value]")),a},M.availability_profile.form.fillValue=function(e,i){var l=i.one("select[name=field]").get("value");"sf_"===l.substr(0,3)?e.sf=l.substr(3):"cf_"===l.substr(0,3)&&(e.cf=l.substr(3)),e.op=i.one("select[name=op]").get("value"),(l=i.one("input[name=value]")).get("disabled")||(e.v=l.get("value"))},M.availability_profile.form.fillErrors=function(e,i){var l={};this.fillValue(l,i),l.sf===undefined&&l.cf===undefined&&e.push("availability_profile:error_selectfield"),l.v!==undefined&&/^\s*$/.test(l.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
+YUI.add("moodle-availability_profile-form",function(n,e){M.availability_profile=M.availability_profile||{},M.availability_profile.form=n.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,i){this.standardFields=e,this.customFields=i},M.availability_profile.form.getNode=function(e){for(var i,l,a,t,o='<span class="availability-group"><label><span class="pr-3">'+M.util.get_string("conditiontitle","availability_profile")+'</span> <select name="field" class="custom-select"><option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",s=0;s<this.standardFields.length;s++)o+='<option value="sf_'+(i=this.standardFields[s]).field+'">'+i.display+"</option>";for(s=0;s<this.customFields.length;s++)o+='<option value="cf_'+(i=this.customFields[s]).field+'">'+i.display+"</option>";for(o+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'" class="custom-select">',l=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"],s=0;s<l.length;s++)o+='<option value="'+l[s]+'">'+M.util.get_string("op_"+l[s],"availability_profile")+"</option>";return o+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" class="form-control" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>',a=n.Node.create('<span class="d-flex flex-wrap align-items-center">'+o+"</span>"),e.sf!==undefined&&a.one("select[name=field] > option[value=sf_"+e.sf+"]")?a.one("select[name=field]").set("value","sf_"+e.sf):e.cf!==undefined&&a.one("select[name=field] > option[value=cf_"+e.cf+"]")&&a.one("select[name=field]").set("value","cf_"+e.cf),e.op!==undefined&&a.one("select[name=op] > option[value="+e.op+"]")&&(a.one("select[name=op]").set("value",e.op),"isempty"!==e.op&&"isnotempty"!==e.op||a.one("input[name=value]").set("disabled",!0)),e.v!==undefined&&a.one("input").set("value",e.v),M.availability_profile.form.addedEvents||(M.availability_profile.form.addedEvents=!0,t=function(e){var e=e.ancestor("span.availability_profile"),i=e.one("select[name=op]"),i="isempty"===i.get("value")||"isnotempty"===i.get("value");e.one("input[name=value]").set("disabled",i),M.core_availability.form.update()},(e=n.one(".availability-field")).delegate("change",function(){t(this)},".availability_profile select"),e.delegate("change",function(){t(this)},".availability_profile input[name=value]")),a},M.availability_profile.form.fillValue=function(e,i){var l=i.one("select[name=field]").get("value");"sf_"===l.substr(0,3)?e.sf=l.substr(3):"cf_"===l.substr(0,3)&&(e.cf=l.substr(3)),e.op=i.one("select[name=op]").get("value"),(l=i.one("input[name=value]")).get("disabled")||(e.v=l.get("value"))},M.availability_profile.form.fillErrors=function(e,i){var l={};this.fillValue(l,i),l.sf===undefined&&l.cf===undefined&&e.push("availability_profile:error_selectfield"),l.v!==undefined&&/^\s*$/.test(l.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
\ No newline at end of file
diff --git a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
index c4fb5a4295e..4aa2f266372 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
@@ -62,7 +62,7 @@ M.availability_profile.form.getNode = function(json) {
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
             '</span><input name="value" type="text" class="form-control" style="width: 10em" title="' +
             M.util.get_string('label_value', 'availability_profile') + '"/></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values if specified.
     if (json.sf !== undefined &&
diff --git a/availability/condition/profile/yui/src/form/js/form.js b/availability/condition/profile/yui/src/form/js/form.js
index 76f75e4175b..903df6b83e7 100644
--- a/availability/condition/profile/yui/src/form/js/form.js
+++ b/availability/condition/profile/yui/src/form/js/form.js
@@ -60,7 +60,7 @@ M.availability_profile.form.getNode = function(json) {
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
             '</span><input name="value" type="text" class="form-control" style="width: 10em" title="' +
             M.util.get_string('label_value', 'availability_profile') + '"/></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values if specified.
     if (json.sf !== undefined &&
diff --git a/backup/util/ui/renderer.php b/backup/util/ui/renderer.php
index fc15f0c8efa..67ad338dc3f 100644
--- a/backup/util/ui/renderer.php
+++ b/backup/util/ui/renderer.php
@@ -866,7 +866,7 @@ class core_backup_renderer extends plugin_renderer_base {
         if ($component->get_count() === 0) {
             $output .= $this->output->notification(get_string('nomatchingcourses', 'backup'));
 
-            $output .= html_writer::start_tag('div', array('class' => 'ics-search form-inline'));
+            $output .= html_writer::start_tag('div', ['class' => 'ics-search d-flex flex-wrap align-items-center']);
             $attrs = array(
                 'type' => 'text',
                 'name' => restore_course_search::$VAR_SEARCH,
@@ -933,7 +933,7 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::table($table);
         $output .= html_writer::end_tag('div');
 
-        $output .= html_writer::start_tag('div', array('class' => 'ics-search form-inline'));
+        $output .= html_writer::start_tag('div', ['class' => 'ics-search d-flex flex-wrap align-items-center']);
         $attrs = array(
             'type' => 'text',
             'name' => restore_course_search::$VAR_SEARCH,
diff --git a/course/templates/course_search_form.mustache b/course/templates/course_search_form.mustache
index c48f25026d0..a128979588d 100644
--- a/course/templates/course_search_form.mustache
+++ b/course/templates/course_search_form.mustache
@@ -33,7 +33,7 @@
         }]
     }
 }}
-<form action="{{searchurl}}" id="{{id}}" method="get" class="form-inline">
+<form action="{{searchurl}}" id="{{id}}" method="get" class="d-flex flex-wrap align-items-center">
     <fieldset class="coursesearchbox invisiblefieldset">
         <label for="{{inputid}}">{{#str}}searchcourses{{/str}}</label>
         <input id="{{inputid}}" name="q" type="text" size="{{inputsize}}" value="{{value}}" class="form-control mb-1 mb-sm-0">
diff --git a/enrol/yui/rolemanager/rolemanager.js b/enrol/yui/rolemanager/rolemanager.js
index e8a77ee52ed..d4a139737e4 100644
--- a/enrol/yui/rolemanager/rolemanager.js
+++ b/enrol/yui/rolemanager/rolemanager.js
@@ -366,7 +366,8 @@ 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 mb-3"></div></div>');
+                                        '</div><div class="content popover-content' +
+                                        ' d-flex flex-wrap align-items-center mb-3"></div></div>');
             var content = element.one('.content');
             var roles = m.get(ASSIGNABLEROLES);
             for (i in roles) {
diff --git a/grade/report/singleview/templates/bulk_insert.mustache b/grade/report/singleview/templates/bulk_insert.mustache
index a0123d10421..c14add1fc70 100644
--- a/grade/report/singleview/templates/bulk_insert.mustache
+++ b/grade/report/singleview/templates/bulk_insert.mustache
@@ -39,7 +39,7 @@
     <input type="checkbox" name="{{applyname}}" value="1" id="{{applyname}}" class="ml-0">
     <label for="{{applyname}}">{{applylabel}}</label>
 </div>
-<fieldset class="form-inline">
+<fieldset class="d-flex flex-wrap align-items-center">
     <legend class="accesshide">{{label}}</legend>
     <label for="{{menuname}}">{{menulabel}}</label>
     <select name="{{menuname}}" id="{{menuname}}" class="form-control custom-select">
diff --git a/grade/templates/weight_override_field.mustache b/grade/templates/weight_override_field.mustache
index 39dc5540829..efc1ec0dda9 100644
--- a/grade/templates/weight_override_field.mustache
+++ b/grade/templates/weight_override_field.mustache
@@ -27,7 +27,7 @@
         "value": "100"
     }
 }}
-<div class="form-inline">
+<div class="d-flex flex-wrap align-items-center">
     <label class="accesshide" for="weightoverride_{{id}}">
         {{#str}}overrideweightofa, grades, {{itemname}}{{/str}}
     </label>
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
index 0cb52135f74..f03b7b28ad6 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
@@ -160,7 +160,7 @@ var CSS = {
                 // Add the size entry boxes.
                 '<div class="mb-1">' +
                 '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="d-flex flex-wrap align-items-center {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
                 '<input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" ' +
                 'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
@@ -181,7 +181,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the alignment selector.
-                '<div class="form-inline mb-1">' +
+                '<div class="d-flex flex-wrap align-items-center mb-1">' +
                 '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
index 290a564531a..a2e5cad4769 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
@@ -1,3 +1,3 @@
 YUI.add("moodle-atto_image-button",function(m,e){var c={RESPONSIVE:"img-fluid",INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEURLWARNING:"atto_image_urlwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview",IMAGEPREVIEWBOX:"atto_image_preview_box",ALIGNSETTINGS:"atto_image_button"},i={URL:"urlentry",ALT:"altentry"},t={INPUTURL:"."+c.INPUTURL},s=[{name:"verticalAlign",str:"alignment_top",value:"text-top",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_middle",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_bottom",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",str:"alignment_left",value:"left",margin:"0 0.5em 0 0"},{name:"float",str:"alignment_right",value:"right",margin:"0 0 0 0.5em"}],a=160,o=160,u=/\d+%/,d="atto_image",I='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if customstyle}}style="{{customstyle}}" {{/if}}{{#if classlist}}class="{{classlist}}" {{/if}}{{#if id}}id="{{id}}" {{/if}}/>';m.namespace("M.atto_image").Button=m.Base.create("button",m.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_rawImageDimensions:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._displayDialogue,"img",this),this.editor.delegate("click",this._handleClick,"img",this),this.editor.on("paste",this._handlePaste,this),this.editor.on("drop",this._handleDragDrop,this),this.editor.on("dragover",function(e){e.preventDefault()},this),this.editor.on("dragenter",function(e){e.preventDefault()},this)},_handleDragDrop:function(e){e._event&&e._event.dataTransfer&&this._handlePasteOrDropHelper(e,e._event.dataTransfer)},_handlePaste:function(e){return!e._event||!e._event.clipboardData||this._handlePasteOrDropHelper(e,e._event.clipboardData)},_handlePasteOrDropHelper:function(e,t){for(var i,n=t.items,a=!1,s=0;s<n.length;s++)"file"===(i=n[s]).kind&&this._isImage(i.type)&&(this._uploadImage(i.getAsFile()),a=!0);a&&e.preventDefault()},_isImage:function(e){return 0===e.indexOf("image/")},_uploadImage:function(e){var t,i,n,a,s,o,l,r=this,h=this.get("host"),g=m.Handlebars.compile(I);for(h.saveSelection(),require(["core_form/events"],function(e){e.notifyUploadStarted(r.editor.get("id"))}),s=(t=h.get("filepickeroptions").image).savepath===undefined?"/":t.savepath,i=new FormData,a=new XMLHttpRequest,o=Object.keys(t.repositories),i.append("repo_upload_file",e),i.append("itemid",t.itemid),l=0;l<o.length;l++)if("upload"===t.repositories[o[l]].type){i.append("repo_id",t.repositories[o[l]].id);break}i.append("env",t.env),i.append("sesskey",M.cfg.sesskey),i.append("client_id",t.client_id),i.append("savepath",s),i.append("ctx_id",t.context.id),e=(new Date).getTime(),n="moodleimage_"+Math.round(1e5*Math.random())+"-"+e,h.focus(),h.restoreSelection(),s=g({url:M.util.image_url("i/loading_small","moodle"),alt:M.util.get_string("uploading",d),id:n}),h.insertContentAtFocusPoint(s),r.markUpdated(),a.onreadystatechange=function(){var e,t,i=r.editor.one("#"+n);if(4===a.readyState){if(200===a.status){if(e=JSON.parse(a.responseText)){if(e.error)throw i&&i.remove(!0),require(["core_form/events"],function(e){e.notifyUploadCompleted(r.editor.get("id"))}),new M.core.ajaxException(e);(t=e).event&&"fileexists"===e.event&&(t=e.newfile),e=g({url:t.url,presentation:!0,classlist:c.RESPONSIVE}),t=m.Node.create(e),i?i.replace(t):r.editor.appendChild(t),r.markUpdated()}}else m.use("moodle-core-notification-alert",function(){require(["core_form/events"],function(e){e.notifyUploadCompleted(r.editor.get("id"))}),new M.core.alert({message:M.util.get_string("servererror","moodle")})}),i&&i.remove(!0);require(["core_form/events"],function(e){e.notifyUploadCompleted(r.editor.get("id"))})}},a.open("POST",M.cfg.wwwroot+"/repository/repository_ajax.php?action=upload",!0),a.send(i)},_handleClick:function(e){e=e.target,e=this.get("host").getSelectionFromNode(e);this.get("host").getSelection()!==e&&this.get("host").setSelection(e)},_displayDialogue:function(){var e;this._currentSelection=this.get("host").getSelection(),!1!==this._currentSelection&&(this._rawImageDimensions=null,(e=this.getDialogue({headerContent:M.util.get_string("imageproperties",d),width:"auto",focusAfterHide:!0,focusOnShowSelector:t.INPUTURL})).get("boundingBox").setStyle("maxWidth","90%"),e.set("bodyContent",this._getDialogueContent()).show())},_loadPreviewImage:function(e){var t=new Image,n=this;t.onerror=function(){n._form.one("."+c.IMAGEPREVIEW).setStyles({display:"none"}),n.getDialogue().centerDialogue()},t.onload=function(){var e,t,i;n._rawImageDimensions={width:this.width||a,height:this.height||o},""===(t=(e=n._form.one("."+c.INPUTWIDTH)).get("value"))&&(e.set("value",n._rawImageDimensions.width),t=""+n._rawImageDimensions.width),""===(i=(e=n._form.one("."+c.INPUTHEIGHT)).get("value"))&&(e.set("value",n._rawImageDimensions.height),i=""+n._rawImageDimensions.height),(e=n._form.one("."+c.IMAGEPREVIEW)).setAttribute("src",this.src),e.setStyles({display:"inline"}),e=n._form.one("."+c.INPUTCONSTRAIN),t.match(u)&&i.match(u)?e.set("checked",t===i):0===this.width||0===this.height?e.set("disabled","disabled"):(t=Math.round(1e3*parseInt(t,10)/this.width),i=Math.round(1e3*parseInt(i,10)/this.height),e.set("checked",t===i)),n._autoAdjustSize(n),n.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var e=m.Handlebars.compile(
-'<form class="atto_form"><div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEURLWARNING}}"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "imageurlrequired" component}}</label></div>{{#if showFilepicker}}<div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><div class="input-group input-append w-100"><input name="{{FORMNAMES.URL}}" class="form-control {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><span class="input-group-append"><button class="btn btn-secondary {{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{else}}<div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input name="{{FORMNAMES.URL}}" class="form-control fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/></div>{{/if}}<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEALTWARNING}}"><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "presentationoraltrequired" component}}</label></div><div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><textarea class="form-control fullwidth {{CSS.INPUTALT}}" id="{{elementid}}_{{CSS.INPUTALT}}" name="{{FORMNAMES.ALT}}" maxlength="125"></textarea><div id="the-count" class="d-flex justify-content-end small"><span id="currentcount">0</span><span id="maximumcount"> / 125</span></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label></div></div><div class="mb-1"><label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="form-control ml-1 input-mini {{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><div class="form-check ml-2"><input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div></div></div><div class="form-inline mb-1"><label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}">{{get_string str ../component}}</option>{{/each}}</select></div><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>'),t=this.get("host").canShowFilepicker("image"),e=m.Node.create(e({elementid:this.get("host").get("elementid"),CSS:c,FORMNAMES:i,component:d,showFilepicker:t,alignments:s}));return this._form=e,this._applyImageProperties(this._form),this._form.one("."+c.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+c.INPUTURL).on("change",this._hasErrorUrlField,this),this._form.one("."+c.IMAGEPRESENTATION).on("change",this._hasErrorAltField,this),this._form.one("."+c.INPUTALT).on("blur",this._hasErrorAltField,this),this._form.one("."+c.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+c.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+c.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+c.INPUTSUBMIT).on("click",this._setImage,this),t&&this._form.one("."+c.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),this._form.one("."+c.INPUTALT).on("keyup",this._handleKeyup,this),e},_autoAdjustSize:function(g,e){var t,i,n,d,a,s,o,l,r,h;e=e||!1,t=this._form.one("."+c.INPUTWIDTH),i="width",n=this._form.one("."+c.INPUTHEIGHT),d="height",h=this._form.one("."+c.INPUTCONSTRAIN),a=t.get("value"),s=n.get("value"),o=this._form.one("."+c.IMAGEPREVIEW),this._rawImageDimensions&&(""===a&&(a=this._rawImageDimensions[i],t.set("value",a),a=t.get("value")),o.setStyles({width:null,height:null}),h.get("checked")?(e&&(h=t,t=n,n=h,h=i,i=d,d=h,h=a,a=s,s=h),a.match(u)?(s=a,l=parseInt(a,10),r=this._rawImageDimensions.width/100*l,o.setStyle("width",r),r=this._rawImageDimensions.height/100*l,o.setStyle("height",r)):(s=Math.round(a/this._rawImageDimensions[i]*this._rawImageDimensions[d]),e?o.setStyles({width:s,height:a}):o.setStyles({width:a,height:s})),n.set("value",s)):(a.match(u)?(l=parseInt(a,10),r=this._rawImageDimensions.width/100*l,o.setStyle("width",r+"px")):o.setStyle("width",a+"px"),s.match(u)?(l=parseInt(s,10),r=this._rawImageDimensions.height/100*l,o.setStyle("height",r+"px")):o.setStyle("height",s+"px")))},_filepickerCallback:function(e){""!==e.url&&(this._form.one("."+c.INPUTURL).set("value",e.url),this._form.one("."+c.INPUTWIDTH).set("value",""),this._form.one("."+c.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url))},_applyImageProperties:function(t){var e=this._getSelectedImageProperties(),i=t.one("."+c.IMAGEPREVIEW);if(!1===e)return i.setStyle("display","none"),void s.some(function(e){return!!e.isDefault&&(t.one("."+c.INPUTALIGNMENT).set("value",e.value),!0)},this);
-e.align&&t.one("."+c.INPUTALIGNMENT).set("value",e.align),e.customstyle&&t.one("."+c.INPUTCUSTOMSTYLE).set("value",e.customstyle),e.width&&t.one("."+c.INPUTWIDTH).set("value",e.width),e.height&&t.one("."+c.INPUTHEIGHT).set("value",e.height),e.alt&&t.one("."+c.INPUTALT).set("value",e.alt),e.src&&(t.one("."+c.INPUTURL).set("value",e.src),this._loadPreviewImage(e.src)),e.presentation&&t.one("."+c.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e,t,i={src:null,alt:null,width:null,height:null,align:"",presentation:!1},n=this.get("host").getSelectedNodes();return(n=n&&n.filter("img"))&&n.size()?(n=this._removeLegacyAlignment(n.item(0)),t=(this._selectedImage=n).getAttribute("style"),i.customstyle=t,(t=n.getAttribute("width")).match(u)||(t=parseInt(t,10)),(e=n.getAttribute("height")).match(u)||(e=parseInt(e,10)),0!==t&&(i.width=t),0!==e&&(i.height=e),this._getAlignmentPropeties(n,i),i.src=n.getAttribute("src"),i.alt=n.getAttribute("alt")||"",i.presentation="presentation"===n.get("role"),i):(this._selectedImage=null,!1)},_getAlignmentPropeties:function(i,n){var a;!s.some(function(e){var t=this._getAlignmentClass(e.value);return i.hasClass(t)?(n.align=e.value,!0):(e.isDefault&&(a=e.value),!1)},this)&&a&&(n.align=a)},_urlChanged:function(){var e=this._form.one("."+c.INPUTURL);""!==e.get("value")&&this._loadPreviewImage(e.get("value"))},_setImage:function(e){var t=this._form,i=t.one("."+c.INPUTURL).get("value"),n=t.one("."+c.INPUTALT).get("value"),a=t.one("."+c.INPUTWIDTH).get("value"),s=t.one("."+c.INPUTHEIGHT).get("value"),o=this._getAlignmentClass(t.one("."+c.INPUTALIGNMENT).get("value")),l=t.one("."+c.IMAGEPRESENTATION).get("checked"),g=t.one("."+c.INPUTCONSTRAIN).get("checked"),d=t.one("."+c.INPUTCUSTOMSTYLE).get("value"),r=[],h=this.get("host");if(e.preventDefault(),!this._updateWarning()){if(h.focus(),""!==i){if(this._selectedImage?h.setSelection(h.getSelectionFromNode(this._selectedImage)):h.setSelection(this._currentSelection),g&&r.push(c.RESPONSIVE),r.push(o),!a.match(u)&&isNaN(parseInt(a,10)))return void t.one("."+c.INPUTWIDTH).focus();if(!s.match(u)&&isNaN(parseInt(s,10)))return void t.one("."+c.INPUTHEIGHT).focus();e=m.Handlebars.compile(I)({url:i,alt:n,width:a,height:s,presentation:l,customstyle:d,classlist:r.join(" ")}),this.get("host").insertContentAtFocusPoint(e),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()}},_removeLegacyAlignment:function(i){return i.getStyle("margin")&&s.some(function(e){if(i.getStyle(e.name)!==e.value)return!1;var t=m.Node.create("<div>");return t.setStyle("margin",e.margin),i.getStyle("margin")===t.getStyle("margin")&&(i.addClass(this._getAlignmentClass(e.value)),i.setStyle(e.name,null),i.setStyle("margin",null),!0)},this),i},_getAlignmentClass:function(e){return c.ALIGNSETTINGS+"_"+e},_toggleVisibility:function(e,t){var i=this._form,e=i.all(e);e.setStyle("display",t?"block":"none")},_toggleAriaInvalid:function(e,t){var i=this._form;e.forEach(function(e){i.all(e).setAttribute("aria-invalid",t)})},_hasErrorUrlField:function(){var e=this._form,e=e.one("."+c.INPUTURL).get("value"),e=""===e;return this._toggleVisibility("."+c.IMAGEURLWARNING,e),this._toggleAriaInvalid(["."+c.INPUTURL],e),e},_hasErrorAltField:function(){var e=this._form,t=e.one("."+c.INPUTALT).get("value"),e=e.one("."+c.IMAGEPRESENTATION).get("checked"),t=""===t&&!e;return this._toggleVisibility("."+c.IMAGEALTWARNING,t),this._toggleAriaInvalid(["."+c.INPUTALT,"."+c.IMAGEPRESENTATION],t),t},_updateWarning:function(){var e=this._hasErrorUrlField(),t=this._hasErrorAltField(),e=e||t;return this.getDialogue().centerDialogue(),e},_handleKeyup:function(){var e=this._form,t=e.one("."+c.INPUTALT).get("value").length;e.one("#currentcount").setHTML(t)}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
\ No newline at end of file
+'<form class="atto_form"><div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEURLWARNING}}"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "imageurlrequired" component}}</label></div>{{#if showFilepicker}}<div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><div class="input-group input-append w-100"><input name="{{FORMNAMES.URL}}" class="form-control {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><span class="input-group-append"><button class="btn btn-secondary {{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{else}}<div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input name="{{FORMNAMES.URL}}" class="form-control fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/></div>{{/if}}<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEALTWARNING}}"><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "presentationoraltrequired" component}}</label></div><div class="mb-1"><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><textarea class="form-control fullwidth {{CSS.INPUTALT}}" id="{{elementid}}_{{CSS.INPUTALT}}" name="{{FORMNAMES.ALT}}" maxlength="125"></textarea><div id="the-count" class="d-flex justify-content-end small"><span id="currentcount">0</span><span id="maximumcount"> / 125</span></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label></div></div><div class="mb-1"><label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="d-flex flex-wrap align-items-center {{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="form-control ml-1 input-mini {{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><div class="form-check ml-2"><input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div></div></div><div class="d-flex flex-wrap align-items-center mb-1"><label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}">{{get_string str ../component}}</option>{{/each}}</select></div><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>'),t=this.get("host").canShowFilepicker("image"),e=m.Node.create(e({elementid:this.get("host").get("elementid"),CSS:c,FORMNAMES:i,component:d,showFilepicker:t,alignments:s}));return this._form=e,this._applyImageProperties(this._form),this._form.one("."+c.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+c.INPUTURL).on("change",this._hasErrorUrlField,this),this._form.one("."+c.IMAGEPRESENTATION).on("change",this._hasErrorAltField,this),this._form.one("."+c.INPUTALT).on("blur",this._hasErrorAltField,this),this._form.one("."+c.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+c.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+c.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+c.INPUTSUBMIT).on("click",this._setImage,this),t&&this._form.one("."+c.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),this._form.one("."+c.INPUTALT).on("keyup",this._handleKeyup,this),e},_autoAdjustSize:function(g,e){var t,i,n,d,a,s,o,l,r,h;e=e||!1,t=this._form.one("."+c.INPUTWIDTH),i="width",n=this._form.one("."+c.INPUTHEIGHT),d="height",h=this._form.one("."+c.INPUTCONSTRAIN),a=t.get("value"),s=n.get("value"),o=this._form.one("."+c.IMAGEPREVIEW),this._rawImageDimensions&&(""===a&&(a=this._rawImageDimensions[i],t.set("value",a),a=t.get("value")),o.setStyles({width:null,height:null}),h.get("checked")?(e&&(h=t,t=n,n=h,h=i,i=d,d=h,h=a,a=s,s=h),a.match(u)?(s=a,l=parseInt(a,10),r=this._rawImageDimensions.width/100*l,o.setStyle("width",r),r=this._rawImageDimensions.height/100*l,o.setStyle("height",r)):(s=Math.round(a/this._rawImageDimensions[i]*this._rawImageDimensions[d]),e?o.setStyles({width:s,height:a}):o.setStyles({width:a,height:s})),n.set("value",s)):(a.match(u)?(l=parseInt(a,10),r=this._rawImageDimensions.width/100*l,o.setStyle("width",r+"px")):o.setStyle("width",a+"px"),s.match(u)?(l=parseInt(s,10),r=this._rawImageDimensions.height/100*l,o.setStyle("height",r+"px")):o.setStyle("height",s+"px")))},_filepickerCallback:function(e){""!==e.url&&(this._form.one("."+c.INPUTURL).set("value",e.url),this._form.one("."+c.INPUTWIDTH).set("value",""),this._form.one("."+c.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url))},_applyImageProperties:function(t){var e=this._getSelectedImageProperties(),i=t.one("."+c.IMAGEPREVIEW);if(!1===e)return i.setStyle("display","none"),void s.some(function(e){return!!e.isDefault&&(t.one(
+"."+c.INPUTALIGNMENT).set("value",e.value),!0)},this);e.align&&t.one("."+c.INPUTALIGNMENT).set("value",e.align),e.customstyle&&t.one("."+c.INPUTCUSTOMSTYLE).set("value",e.customstyle),e.width&&t.one("."+c.INPUTWIDTH).set("value",e.width),e.height&&t.one("."+c.INPUTHEIGHT).set("value",e.height),e.alt&&t.one("."+c.INPUTALT).set("value",e.alt),e.src&&(t.one("."+c.INPUTURL).set("value",e.src),this._loadPreviewImage(e.src)),e.presentation&&t.one("."+c.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e,t,i={src:null,alt:null,width:null,height:null,align:"",presentation:!1},n=this.get("host").getSelectedNodes();return(n=n&&n.filter("img"))&&n.size()?(n=this._removeLegacyAlignment(n.item(0)),t=(this._selectedImage=n).getAttribute("style"),i.customstyle=t,(t=n.getAttribute("width")).match(u)||(t=parseInt(t,10)),(e=n.getAttribute("height")).match(u)||(e=parseInt(e,10)),0!==t&&(i.width=t),0!==e&&(i.height=e),this._getAlignmentPropeties(n,i),i.src=n.getAttribute("src"),i.alt=n.getAttribute("alt")||"",i.presentation="presentation"===n.get("role"),i):(this._selectedImage=null,!1)},_getAlignmentPropeties:function(i,n){var a;!s.some(function(e){var t=this._getAlignmentClass(e.value);return i.hasClass(t)?(n.align=e.value,!0):(e.isDefault&&(a=e.value),!1)},this)&&a&&(n.align=a)},_urlChanged:function(){var e=this._form.one("."+c.INPUTURL);""!==e.get("value")&&this._loadPreviewImage(e.get("value"))},_setImage:function(e){var t=this._form,i=t.one("."+c.INPUTURL).get("value"),n=t.one("."+c.INPUTALT).get("value"),a=t.one("."+c.INPUTWIDTH).get("value"),s=t.one("."+c.INPUTHEIGHT).get("value"),o=this._getAlignmentClass(t.one("."+c.INPUTALIGNMENT).get("value")),l=t.one("."+c.IMAGEPRESENTATION).get("checked"),g=t.one("."+c.INPUTCONSTRAIN).get("checked"),d=t.one("."+c.INPUTCUSTOMSTYLE).get("value"),r=[],h=this.get("host");if(e.preventDefault(),!this._updateWarning()){if(h.focus(),""!==i){if(this._selectedImage?h.setSelection(h.getSelectionFromNode(this._selectedImage)):h.setSelection(this._currentSelection),g&&r.push(c.RESPONSIVE),r.push(o),!a.match(u)&&isNaN(parseInt(a,10)))return void t.one("."+c.INPUTWIDTH).focus();if(!s.match(u)&&isNaN(parseInt(s,10)))return void t.one("."+c.INPUTHEIGHT).focus();e=m.Handlebars.compile(I)({url:i,alt:n,width:a,height:s,presentation:l,customstyle:d,classlist:r.join(" ")}),this.get("host").insertContentAtFocusPoint(e),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()}},_removeLegacyAlignment:function(i){return i.getStyle("margin")&&s.some(function(e){if(i.getStyle(e.name)!==e.value)return!1;var t=m.Node.create("<div>");return t.setStyle("margin",e.margin),i.getStyle("margin")===t.getStyle("margin")&&(i.addClass(this._getAlignmentClass(e.value)),i.setStyle(e.name,null),i.setStyle("margin",null),!0)},this),i},_getAlignmentClass:function(e){return c.ALIGNSETTINGS+"_"+e},_toggleVisibility:function(e,t){var i=this._form,e=i.all(e);e.setStyle("display",t?"block":"none")},_toggleAriaInvalid:function(e,t){var i=this._form;e.forEach(function(e){i.all(e).setAttribute("aria-invalid",t)})},_hasErrorUrlField:function(){var e=this._form,e=e.one("."+c.INPUTURL).get("value"),e=""===e;return this._toggleVisibility("."+c.IMAGEURLWARNING,e),this._toggleAriaInvalid(["."+c.INPUTURL],e),e},_hasErrorAltField:function(){var e=this._form,t=e.one("."+c.INPUTALT).get("value"),e=e.one("."+c.IMAGEPRESENTATION).get("checked"),t=""===t&&!e;return this._toggleVisibility("."+c.IMAGEALTWARNING,t),this._toggleAriaInvalid(["."+c.INPUTALT,"."+c.IMAGEPRESENTATION],t),t},_updateWarning:function(){var e=this._hasErrorUrlField(),t=this._hasErrorAltField(),e=e||t;return this.getDialogue().centerDialogue(),e},_handleKeyup:function(){var e=this._form,t=e.one("."+c.INPUTALT).get("value").length;e.one("#currentcount").setHTML(t)}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
index b6da1be547a..7ce83c2336c 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
@@ -160,7 +160,7 @@ var CSS = {
                 // Add the size entry boxes.
                 '<div class="mb-1">' +
                 '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="d-flex flex-wrap align-items-center {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
                 '<input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" ' +
                 'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
@@ -181,7 +181,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the alignment selector.
-                '<div class="form-inline mb-1">' +
+                '<div class="d-flex flex-wrap align-items-center mb-1">' +
                 '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
diff --git a/lib/editor/atto/plugins/image/yui/src/button/js/button.js b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
index daec43f3cbc..b8d8a71fb0d 100644
--- a/lib/editor/atto/plugins/image/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
@@ -158,7 +158,7 @@ var CSS = {
                 // Add the size entry boxes.
                 '<div class="mb-1">' +
                 '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="d-flex flex-wrap align-items-center {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
                 '<input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" ' +
                 'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
@@ -179,7 +179,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the alignment selector.
-                '<div class="form-inline mb-1">' +
+                '<div class="d-flex flex-wrap align-items-center mb-1">' +
                 '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
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 2151506aa0c..f0b74ad19c3 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
@@ -253,7 +253,7 @@ var COMPONENTNAME = 'atto_media',
                     '{{#mediatype_video}}' +
                     '<div class="mb-1">' +
                         '<label>{{get_string "size" component}}</label>' +
-                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                        '<div class="d-flex flex-wrap align-items-center {{CSS.POSTER_SIZE}}">' +
                             '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
                             '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
index 696c40780ab..4d12441c85e 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
@@ -1,5 +1,5 @@
 YUI.add("moodle-atto_media-button",function(l,e){var t="atto_media",i={LINK:"LINK",VIDEO:"VIDEO",AUDIO:"AUDIO"},a={SUBTITLES:"SUBTITLES",CAPTIONS:"CAPTIONS",DESCRIPTIONS:"DESCRIPTIONS",CHAPTERS:"CHAPTERS",METADATA:"METADATA"},o={SOURCE:"atto_media_source",TRACK:"atto_media_track",MEDIA_SOURCE:"atto_media_media_source",LINK_SOURCE:"atto_media_link_source",POSTER_SOURCE:"atto_media_poster_source",TRACK_SOURCE:"atto_media_track_source",DISPLAY_OPTIONS:"atto_media_display_options",NAME_INPUT:"atto_media_name_entry",TITLE_INPUT:"atto_media_title_entry",URL_INPUT:"atto_media_url_entry",POSTER_SIZE:"atto_media_poster_size",LINK_SIZE:"atto_media_link_size",WIDTH_INPUT:"atto_media_width_entry",HEIGHT_INPUT:"atto_media_height_entry",TRACK_KIND_INPUT:"atto_media_track_kind_entry",TRACK_LABEL_INPUT:"atto_media_track_label_entry",TRACK_LANG_INPUT:"atto_media_track_lang_entry",TRACK_DEFAULT_SELECT:"atto_media_track_default",MEDIA_CONTROLS_TOGGLE:"atto_media_controls",MEDIA_AUTOPLAY_TOGGLE:"atto_media_autoplay",MEDIA_MUTE_TOGGLE:"atto_media_mute",MEDIA_LOOP_TOGGLE:"atto_media_loop",ADVANCED_SETTINGS:"atto_media_advancedsettings",LINK:i.LINK.toLowerCase(),VIDEO:i.VIDEO.toLowerCase(),AUDIO:i.AUDIO.toLowerCase(),TRACK_SUBTITLES:a.SUBTITLES.toLowerCase(),TRACK_CAPTIONS:a.CAPTIONS.toLowerCase(),TRACK_DESCRIPTIONS:a.DESCRIPTIONS.toLowerCase(),TRACK_CHAPTERS:a.CHAPTERS.toLowerCase(),TRACK_METADATA:a.METADATA.toLowerCase()},s={SOURCE:"."+o.SOURCE,TRACK:"."+o.TRACK,MEDIA_SOURCE:"."+o.MEDIA_SOURCE,POSTER_SOURCE:"."+o.POSTER_SOURCE,TRACK_SOURCE:"."+o.TRACK_SOURCE,DISPLAY_OPTIONS:"."+o.DISPLAY_OPTIONS,NAME_INPUT:"."+o.NAME_INPUT,TITLE_INPUT:"."+o.TITLE_INPUT,URL_INPUT:"."+o.URL_INPUT,POSTER_SIZE:"."+o.POSTER_SIZE,LINK_SIZE:"."+o.LINK_SIZE,WIDTH_INPUT:"."+o.WIDTH_INPUT,HEIGHT_INPUT:"."+o.HEIGHT_INPUT,TRACK_KIND_INPUT:"."+o.TRACK_KIND_INPUT,TRACK_LABEL_INPUT:"."+o.TRACK_LABEL_INPUT,TRACK_LANG_INPUT:"."+o.TRACK_LANG_INPUT,TRACK_DEFAULT_SELECT:"."+o.TRACK_DEFAULT_SELECT,MEDIA_CONTROLS_TOGGLE:"."+o.MEDIA_CONTROLS_TOGGLE,MEDIA_AUTOPLAY_TOGGLE:"."+o.MEDIA_AUTOPLAY_TOGGLE,MEDIA_MUTE_TOGGLE:"."+o.MEDIA_MUTE_TOGGLE,MEDIA_LOOP_TOGGLE:"."+o.MEDIA_LOOP_TOGGLE,ADVANCED_SETTINGS:"."+o.ADVANCED_SETTINGS,LINK_TAB:'li[data-medium-type="'+o.LINK+'"]',LINK_PANE:'.tab-pane[data-medium-type="'+o.LINK+'"]',VIDEO_TAB:'li[data-medium-type="'+o.VIDEO+'"]',VIDEO_PANE:'.tab-pane[data-medium-type="'+o.VIDEO+'"]',AUDIO_TAB:'li[data-medium-type="'+o.AUDIO+'"]',AUDIO_PANE:'.tab-pane[data-medium-type="'+o.AUDIO+'"]',TRACK_SUBTITLES_TAB:'li[data-track-kind="'+o.TRACK_SUBTITLES+'"]',TRACK_SUBTITLES_PANE:'.tab-pane[data-track-kind="'+o.TRACK_SUBTITLES+'"]',TRACK_CAPTIONS_TAB:'li[data-track-kind="'+o.TRACK_CAPTIONS+'"]',TRACK_CAPTIONS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_CAPTIONS+'"]',TRACK_DESCRIPTIONS_TAB:'li[data-track-kind="'+o.TRACK_DESCRIPTIONS+'"]',TRACK_DESCRIPTIONS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_DESCRIPTIONS+'"]',TRACK_CHAPTERS_TAB:'li[data-track-kind="'+o.TRACK_CHAPTERS+'"]',TRACK_CHAPTERS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_CHAPTERS+'"]',TRACK_METADATA_TAB:'li[data-track-kind="'+o.TRACK_METADATA+'"]',TRACK_METADATA_PANE:'.tab-pane[data-track-kind="'+o.TRACK_METADATA+'"]'},d={ROOT:'<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form"><ul class="root nav nav-tabs mb-1" role="tablist"><li data-medium-type="{{CSS.LINK}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">{{get_string "link" component}}</a></li><li data-medium-type="{{CSS.VIDEO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">{{get_string "video" component}}</a></li><li data-medium-type="{{CSS.AUDIO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">{{get_string "audio" component}}</a></li></ul><div class="root tab-content"><div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">{{> tab_panes.link}}</div><div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">{{> tab_panes.video}}</div><div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">{{> tab_panes.audio}}</div></div><div class="mdl-align"><br/><button class="btn btn-secondary submit" type="submit">{{get_string "createmedia" component}}</button></div></form>',TAB_PANES:{LINK:'{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label><input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"size="32" required="true"/>',
-VIDEO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options"><input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings"><input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks"><input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}<div id="vtracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}</div></fieldset>',AUDIO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options"><input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings"><input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks"><input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}<div id="atracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}</div></fieldset>'},FORM_COMPONENTS:{SOURCE:'<div class="{{CSS.SOURCE}} {{id}}"><div class="mb-1"><label for="url-input">{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</label><div class="input-group input-append w-100"><input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/><span class="input-group-append"><button class="btn btn-secondary openmediabrowser" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{#multisource}}{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel  help=../addsourcehelp}}{{/multisource}}</div>',ADD_COMPONENT:'<div><a href="#" class="addcomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "add" ../component}}{{/label}}</a>{{#help}}{{{../help}}}{{/help}}</div>',REMOVE_COMPONENT:'<div><a href="#" class="removecomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "remove" ../component}}{{/label}}</a></div>',DISPLAY_OPTIONS:'<div class="{{CSS.DISPLAY_OPTIONS}}"><div class="mb-1"><label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label><input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"size="32"/></div><div class="clearfix"></div>{{#mediatype_video}}<div class="mb-1"><label>{{get_string "size" component}}</label><div class="form-inline {{CSS.POSTER_SIZE}}"><label class="accesshide">{{get_string "videowidth" component}}</label><input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/> x <label class="accesshide">{{get_string "videoheight" component}}</label><input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/></div></div><div class="clearfix"></div>{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}{{/mediatype_video}}<div>',
-ADVANCED_SETTINGS:'<div class="{{CSS.ADVANCED_SETTINGS}}"><div class="form-check"><input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"id="{{id}}_media-controls-toggle"/><label class="form-check-label" for="{{id}}_media-controls-toggle">{{get_string "controls" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"id="{{id}}_media-autoplay-toggle"/><label class="form-check-label" for="{{id}}_media-autoplay-toggle">{{get_string "autoplay" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="{{id}}_media-mute-toggle"/><label class="form-check-label" for="{{id}}_media-mute-toggle">{{get_string "mute" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="{{id}}_media-loop-toggle"/><label class="form-check-label" for="{{id}}_media-loop-toggle">{{get_string "loop" component}}</label></div></div>',TRACK_TABS:'<ul class="nav nav-tabs mb-3"><li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}" role="tab" data-toggle="tab">{{get_string "subtitles" component}}</a></li><li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">{{get_string "captions" component}}</a></li><li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}" role="tab" data-toggle="tab">{{get_string "descriptions" component}}</a></li><li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">{{get_string "chapters" component}}</a></li><li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">{{get_string "metadata" component}}</a></li></ul><div class="tab-content"><div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active" id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"><div class="trackhelp">{{{helpStrings.subtitles}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel" addcomponentlabel="addsubtitlestrack"}}</div><div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}"><div class="trackhelp">{{{helpStrings.captions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel" addcomponentlabel="addcaptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"><div class="trackhelp">{{{helpStrings.descriptions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel" addcomponentlabel="adddescriptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}"><div class="trackhelp">{{{helpStrings.chapters}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel" addcomponentlabel="addchapterstrack"}}</div><div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}"><div class="trackhelp">{{{helpStrings.metadata}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel" addcomponentlabel="addmetadatatrack"}}</div></div>',TRACK:'<div class="mb-1 {{CSS.TRACK}}">{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}<div class="form-group"><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}}">{{#langsinstalled}}<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>{{/langsinstalled}}</optgroup><optgroup label="{{get_string "languagesavailable" component}} ">{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}</optgroup></select></div><div class="form-group"><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><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/><label class="form-check-label">{{get_string "default" component}}</label></div>{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}</div>',SECTION:'<legend class="d-flex align-items-center px-1"><div class="position-relative d-flex ftoggler align-items-center position-relative mr-1"><a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"aria-controls="{{id}}"class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed"><span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}"><i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i></span><span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}"><span class="dir-rtl-hide"><i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i></span><span class="dir-ltr-hide"><i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i></span></span><span class="sr-only">{{get_string name component}}</span></a><h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">{{get_string name component}}</h3></div>{{#help}}{{{../help}}}{{/help}}</legend>'},HTML_MEDIA:{
+VIDEO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options"><input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings"><input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks"><input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}<div id="vtracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}</div></fieldset>',AUDIO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options"><input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings"><input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks"><input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}<div id="atracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}</div></fieldset>'},FORM_COMPONENTS:{SOURCE:'<div class="{{CSS.SOURCE}} {{id}}"><div class="mb-1"><label for="url-input">{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</label><div class="input-group input-append w-100"><input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/><span class="input-group-append"><button class="btn btn-secondary openmediabrowser" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{#multisource}}{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel  help=../addsourcehelp}}{{/multisource}}</div>',ADD_COMPONENT:'<div><a href="#" class="addcomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "add" ../component}}{{/label}}</a>{{#help}}{{{../help}}}{{/help}}</div>',REMOVE_COMPONENT:'<div><a href="#" class="removecomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "remove" ../component}}{{/label}}</a></div>',DISPLAY_OPTIONS:'<div class="{{CSS.DISPLAY_OPTIONS}}"><div class="mb-1"><label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label><input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"size="32"/></div><div class="clearfix"></div>{{#mediatype_video}}<div class="mb-1"><label>{{get_string "size" component}}</label><div class="d-flex flex-wrap align-items-center {{CSS.POSTER_SIZE}}"><label class="accesshide">{{get_string "videowidth" component}}</label><input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/> x <label class="accesshide">{{get_string "videoheight" component}}</label><input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/></div></div><div class="clearfix"></div>{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}{{/mediatype_video}}<div>',
+ADVANCED_SETTINGS:'<div class="{{CSS.ADVANCED_SETTINGS}}"><div class="form-check"><input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"id="{{id}}_media-controls-toggle"/><label class="form-check-label" for="{{id}}_media-controls-toggle">{{get_string "controls" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"id="{{id}}_media-autoplay-toggle"/><label class="form-check-label" for="{{id}}_media-autoplay-toggle">{{get_string "autoplay" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="{{id}}_media-mute-toggle"/><label class="form-check-label" for="{{id}}_media-mute-toggle">{{get_string "mute" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="{{id}}_media-loop-toggle"/><label class="form-check-label" for="{{id}}_media-loop-toggle">{{get_string "loop" component}}</label></div></div>',TRACK_TABS:'<ul class="nav nav-tabs mb-3"><li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}" role="tab" data-toggle="tab">{{get_string "subtitles" component}}</a></li><li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">{{get_string "captions" component}}</a></li><li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}" role="tab" data-toggle="tab">{{get_string "descriptions" component}}</a></li><li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">{{get_string "chapters" component}}</a></li><li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">{{get_string "metadata" component}}</a></li></ul><div class="tab-content"><div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active" id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"><div class="trackhelp">{{{helpStrings.subtitles}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel" addcomponentlabel="addsubtitlestrack"}}</div><div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}"><div class="trackhelp">{{{helpStrings.captions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel" addcomponentlabel="addcaptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"><div class="trackhelp">{{{helpStrings.descriptions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel" addcomponentlabel="adddescriptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}"><div class="trackhelp">{{{helpStrings.chapters}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel" addcomponentlabel="addchapterstrack"}}</div><div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}"><div class="trackhelp">{{{helpStrings.metadata}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel" addcomponentlabel="addmetadatatrack"}}</div></div>',TRACK:'<div class="mb-1 {{CSS.TRACK}}">{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}<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}}">{{#langsinstalled}}<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>{{/langsinstalled}}</optgroup><optgroup label="{{get_string "languagesavailable" component}} ">{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}</optgroup></select></div><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><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/><label class="form-check-label">{{get_string "default" component}}</label></div>{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}</div>',SECTION:'<legend class="d-flex align-items-center px-1"><div class="position-relative d-flex ftoggler align-items-center position-relative mr-1"><a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"aria-controls="{{id}}"class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed"><span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}"><i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i></span><span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}"><span class="dir-rtl-hide"><i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i></span><span class="dir-ltr-hide"><i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i></span></span><span class="sr-only">{{get_string name component}}</span></a><h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">{{get_string name component}}</h3></div>{{#help}}{{{../help}}}{{/help}}</legend>'},HTML_MEDIA:{
 VIDEO:'&nbsp;<video {{#width}}width="{{../width}}" {{/width}}{{#height}}height="{{../height}}" {{/height}}{{#poster}}poster="{{../poster}}" {{/poster}}{{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}{{#title}}title="{{../title}}" {{/title}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</video>&nbsp',AUDIO:'&nbsp;<audio {{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}{{#title}}title="{{../title}}" {{/title}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</audio>&nbsp',LINK:'<a href="{{url}}" {{#width}}data-width="{{../width}}" {{/width}}{{#height}}data-height="{{../height}}"{{/height}}>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'}};l.namespace("M.atto_media").Button=l.Base.create("button",l.M.editor_atto.EditorPlugin,[],{initializer:function(){var e;this.get("host").canShowFilepicker("media")&&(this.editor.delegate("dblclick",this._displayDialogue,"video",this),this.editor.delegate("click",this._handleClick,"video",this),this._attachPlayPauseEvents(),e=this._attachPlayPauseEvents.bind(this),this.get("host").on("change",e,null),this.addButton({icon:"e/insert_edit_video",callback:this._displayDialogue,tags:"video, audio",tagMatchRequiresAll:!1}))},_attachPlayPauseEvents:function(){this._handlePlayEndBound===undefined&&(this._handlePlayEndBound=this._handlePlayEnd.bind(this)),this.editor.getDOMNode().querySelectorAll("video").forEach(function(e){e.removeEventListener("play",this._handlePlayEndBound),e.removeEventListener("pause",this._handlePlayEndBound),e.addEventListener("play",this._handlePlayEndBound),e.addEventListener("pause",this._handlePlayEndBound)}.bind(this))},_getContext:function(e){return l.merge({elementid:this.get("host").get("elementid"),component:t,langsinstalled:this.get("langs").installed,langsavailable:this.get("langs").available,helpStrings:this.get("help"),CSS:o},e)},_handleClick:function(e){e=e.target,e=this.get("host").getSelectionFromNode(e);this.get("host").getSelection()!==e&&this.get("host").setSelection(e)},_handlePlayEnd:function(e){var t=l.one(e.target),t=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==t&&(this.get("host").setSelection(t),this.get("host")._hasSelectionChanged(e))},_displayDialogue:function(){!1!==this.get("host").getSelection()&&("renderPartial"in l.Handlebars.helpers||(function i(a,e){l.each(e,function(e,t){a.push(t),"object"!=typeof e?l.Handlebars.registerPartial(a.join(".").toLowerCase(),e):i(a,e),a.pop()})}([],d),l.Handlebars.registerHelper("renderPartial",function(e,t){var a;return e?(e=l.Handlebars.partials[e],a=t.hash.context?l.clone(t.hash.context):{},delete(a=l.merge(a,t.hash)).context,e?new l.Handlebars.SafeString(l.Handlebars.compile(e)(a)):""):""})),this.getDialogue({headerContent:M.util.get_string("createmedia",t),focusAfterHide:!0,width:660,focusOnShowSelector:s.URL_INPUT}).set("bodyContent",this._getDialogueContent(this.get("host").getSelection())).show(),M.form.shortforms({formid:this.get("host").get("elementid")+"_atto_media_form"}))},_getDialogueContent:function(e){var t=l.Node.create(l.Handlebars.compile(d.ROOT)(this._getContext())),a=this.get("host").getSelectedNodes().filter("video,audio").shift(),a=!!a&&this._getMediumProperties(a);return this._attachEvents(this._applyMediumProperties(t,a),e)},_attachEvents:function(e,a){return e.delegate("click",function(e){e.preventDefault(),this._addMediaSourceComponent(e.currentTarget)},s.MEDIA_SOURCE+" .addcomponent",this),e.delegate("click",function(e){e.preventDefault(),this._addTrackComponent(e.currentTarget)},s.TRACK+" .addcomponent",this),e.delegate("click",function(e){var t,a=e.currentTarget;a.get("checked")&&(t=function(e){return this._getTrackTypeFromTabPane(e.ancestor(".tab-pane"))}.bind(this),a.ancestor(".root.tab-content").all(s.TRACK_DEFAULT_SELECT).each(function(e){e!==a&&t(a)===t(e)&&e.set("checked",!1)}))},s.TRACK_DEFAULT_SELECT,this),e.delegate("click",function(e){var t=e.currentTarget,a=(t.ancestor(s.POSTER_SOURCE)?"image":t.ancestor(s.TRACK_SOURCE)&&"subtitle")||"media";e.preventDefault(),this.get("host").showFilepicker(a,this._getFilepickerCallback(t,a),this)},".openmediabrowser",this),e.all(".nav-item").on("click",function(e){e.currentTarget.get("parentNode").all(".active").removeClass("active")}),e.one(".submit").on("click",function(e){e.preventDefault();var e=this._getMediaHTML(e.currentTarget.ancestor(".atto_form")),t=this.get("host");this.getDialogue({focusAfterHide:null}).hide(),e&&(t.setSelection(a),t.insertContentAtFocusPoint(e),this.markUpdated())},this),e},_applyMediumProperties:function(e,t){var i,n,a;return t&&(i=function(e,t){e.one(s.TRACK_SOURCE+" "+s.URL_INPUT).set("value",t.src),e.one(s.TRACK_LANG_INPUT).set("value",t.srclang),e.one(s.TRACK_LABEL_INPUT).set("value",t.label),e.one(s.TRACK_DEFAULT_SELECT).set("checked",t.defaultTrack)},(n=e.one(".root.tab-content > .tab-pane#"+this.get("host").get("elementid")+"_"+t.type.toLowerCase())).one(s.MEDIA_SOURCE+" "+s.URL_INPUT).set("value",t.sources[0]),l.Array.each(t.sources.slice(1),function(t){this._addMediaSourceComponent(n.one(s.MEDIA_SOURCE+" .addcomponent"),function(e){e.one(s.URL_INPUT).set("value",t)})},this),l.Object.each(t.tracks,function(e,t){var e=e.length?e:[{src:"",srclang:"",label:"",defaultTrack:!1}],a=s["TRACK_"+t.toUpperCase()+"_PANE"];i(n.one(a+" "+s.TRACK),e[0]),l.Array.each(e.slice(1),function(t){this._addTrackComponent(n.one(
 a+" "+s.TRACK+" .addcomponent"),function(e){i(e,t)})},this)},this),n.one(s.TITLE_INPUT).set("value",t.title),n.one(s.MEDIA_CONTROLS_TOGGLE).set("checked",t.controls),n.one(s.MEDIA_AUTOPLAY_TOGGLE).set("checked",t.autoplay),n.one(s.MEDIA_MUTE_TOGGLE).set("checked",t.muted),n.one(s.MEDIA_LOOP_TOGGLE).set("checked",t.loop),"video"===(a=this._getMediumTypeFromTabPane(n))&&(n.one(s.POSTER_SOURCE+" "+s.URL_INPUT).setAttribute("value",t.poster),n.one(s.WIDTH_INPUT).set("value",t.width),n.one(s.HEIGHT_INPUT).set("value",t.height)),n.siblings(".active").removeClass("active"),e.all(".root.nav-tabs .nav-item a").removeClass("active"),n.addClass("active"),e.one(s[a.toUpperCase()+"_TAB"]+" a").addClass("active")),e},_getMediumProperties:function(e){var t=function(e,t){return e.hasAttribute(t)&&(e.getAttribute(t)||""===e.getAttribute(t))},a={subtitles:[],captions:[],descriptions:[],chapters:[],metadata:[]};return e.all("track").each(function(e){a[e.getAttribute("kind")].push({src:e.getAttribute("src"),srclang:e.getAttribute("srclang"),label:e.getAttribute("label"),defaultTrack:t(e,"default")})}),{type:e.test("video")?i.VIDEO:i.AUDIO,sources:e.all("source").get("src"),poster:e.getAttribute("poster"),title:e.getAttribute("title"),width:e.getAttribute("width"),height:e.getAttribute("height"),autoplay:t(e,"autoplay"),loop:t(e,"loop"),muted:t(e,"muted"),controls:t(e,"controls"),tracks:a}},_addTrackComponent:function(e,t){var a=this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),a=this._getContext({sourcelabel:a+"sourcelabel",addcomponentlabel:"add"+a+"track"});this._addComponent(e,d.FORM_COMPONENTS.TRACK,s.TRACK,a,t)},_addMediaSourceComponent:function(e,t){var a=this._getMediumTypeFromTabPane(e.ancestor(".tab-pane")),a=this._getContext({multisource:!0,id:o.MEDIA_SOURCE,entersourcelabel:a+"sourcelabel",addcomponentlabel:"addsource",addsourcehelp:this.get("help").addsource});this._addComponent(e,d.FORM_COMPONENTS.SOURCE,s.MEDIA_SOURCE,a,t)},_addComponent:function(e,t,a,i,n){var o=e.ancestor(a),a=l.Node.create(l.Handlebars.compile(t)(i)),t=this._getContext(i);t.label="remove",(i=l.Node.create(l.Handlebars.compile(d.FORM_COMPONENTS.REMOVE_COMPONENT)(t))).one(".removecomponent").on("click",function(e){e.preventDefault(),o.remove(!0)}),o.insert(a,"after"),e.ancestor().insert(i,"after"),e.ancestor().remove(!0),n&&n.call(this,a)},_getFilepickerCallback:function(i,n){return function(e){var a,t;""!==e.url&&(t=i.ancestor(".tab-pane"),i.ancestor(s.SOURCE).one(s.URL_INPUT).set("value",e.url),t.get("id")===this.get("host").get("elementid")+"_"+o.LINK&&t.one(s.NAME_INPUT).set("value",e.file),"subtitle"===n&&(a=e.file.split(".vtt")[0].split("-").slice(-1)[0],(t=this.get("langs").available.reduce(function(e,t){return t.code===a?t:e},!1))&&(i.ancestor(s.TRACK).one(s.TRACK_LABEL_INPUT).set("value",t.lang.substr(0,t.lang.lastIndexOf(" "))),i.ancestor(s.TRACK).one(s.TRACK_LANG_INPUT).set("value",t.code))))}},_getMediumTypeFromTabPane:function(e){return e.getAttribute("data-medium-type")},_getTrackTypeFromTabPane:function(e){return e.getAttribute("data-track-kind")},_getMediaHTML:function(e){var t=this._getMediumTypeFromTabPane(e.one(".root.tab-content > .tab-pane.active")),e=e.one(s[t.toUpperCase()+"_PANE"]);return this["_getMediaHTML"+t[0].toUpperCase()+t.substr(1)](e)},_getMediaHTMLLink:function(e){e={url:e.one(s.URL_INPUT).get("value"),name:e.one(s.NAME_INPUT).get("value")||!1};return e.url?l.Handlebars.compile(d.HTML_MEDIA.LINK)(e):""},_getMediaHTMLVideo:function(e){var t=this._getContextForMediaHTML(e);return t.width=e.one(s.WIDTH_INPUT).get("value")||!1,t.height=e.one(s.HEIGHT_INPUT).get("value")||!1,t.poster=e.one(s.POSTER_SOURCE+" "+s.URL_INPUT).get("value")||!1,t.sources.length?l.Handlebars.compile(d.HTML_MEDIA.VIDEO)(t):""},_getMediaHTMLAudio:function(e){e=this._getContextForMediaHTML(e);return e.sources.length?l.Handlebars.compile(d.HTML_MEDIA.AUDIO)(e):""},_getContextForMediaHTML:function(e){var t=[];return e.all(s.TRACK).each(function(e){t.push({track:e.one(s.TRACK_SOURCE+" "+s.URL_INPUT).get("value"),kind:this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),label:e.one(s.TRACK_LABEL_INPUT).get("value")||e.one(s.TRACK_LANG_INPUT).get("value"),srclang:e.one(s.TRACK_LANG_INPUT).get("value"),defaultTrack:e.one(s.TRACK_DEFAULT_SELECT).get("checked")?"true":null})},this),{sources:e.all(s.MEDIA_SOURCE+" "+s.URL_INPUT).get("value").filter(function(e){return!!e}).map(function(e){return{source:e}}),description:e.one(s.MEDIA_SOURCE+" "+s.URL_INPUT).get("value")||!1,tracks:t.filter(function(e){return!!e.track}),showControls:e.one(s.MEDIA_CONTROLS_TOGGLE).get("checked"),autoplay:e.one(s.MEDIA_AUTOPLAY_TOGGLE).get("checked"),muted:e.one(s.MEDIA_MUTE_TOGGLE).get("checked"),loop:e.one(s.MEDIA_LOOP_TOGGLE).get("checked"),title:e.one(s.TITLE_INPUT).get("value")||!1}}},{ATTRS:{langs:{},help:{}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-form-shortforms"]});
\ No newline at end of file
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 2151506aa0c..f0b74ad19c3 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
@@ -253,7 +253,7 @@ var COMPONENTNAME = 'atto_media',
                     '{{#mediatype_video}}' +
                     '<div class="mb-1">' +
                         '<label>{{get_string "size" component}}</label>' +
-                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                        '<div class="d-flex flex-wrap align-items-center {{CSS.POSTER_SIZE}}">' +
                             '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
                             '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
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 e5e84cd76ae..d7fe1253060 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
@@ -251,7 +251,7 @@ var COMPONENTNAME = 'atto_media',
                     '{{#mediatype_video}}' +
                     '<div class="mb-1">' +
                         '<label>{{get_string "size" component}}</label>' +
-                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                        '<div class="d-flex flex-wrap align-items-center {{CSS.POSTER_SIZE}}">' +
                             '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
                             '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
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 7a56feedb94..0b806299c5a 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
@@ -126,7 +126,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
                     'class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
@@ -140,7 +140,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "bordercolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
                             'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
@@ -167,7 +167,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "backgroundcolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
                             'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
@@ -194,7 +194,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="width" id="{{elementid}}_atto_table_width" ' +
                         'class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
index 68701012a11..a66d1a67747 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
@@ -1,5 +1,5 @@
 YUI.add("moodle-atto_table-button",function(v,e){var m="atto_table",_="none",p="1",f="480px",l={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form",BORDERS:"borders",BORDERSIZE:"bordersize",BORDERSIZEUNIT:"px",BORDERCOLOUR:"bordercolour",BORDERSTYLE:"borderstyle",BACKGROUNDCOLOUR:"backgroundcolour",WIDTH:"customwidth",WIDTHUNIT:"%",AVAILABLECOLORS:"availablecolors",COLOURROW:"colourrow"},O={CAPTION:"."+l.CAPTION,CAPTIONPOSITION:"."+l.CAPTIONPOSITION,HEADERS:"."+l.HEADERS,ROWS:"."+l.ROWS,COLUMNS:"."+l.COLUMNS,SUBMIT:"."+l.SUBMIT,BORDERS:"."+l.BORDERS,BORDERSIZE:"."+l.BORDERSIZE,BORDERCOLOURS:"."+l.BORDERCOLOUR+' input[name="borderColour"]',SELECTEDBORDERCOLOUR:"."+l.BORDERCOLOUR+' input[name="borderColour"]:checked',BORDERSTYLE:"."+l.BORDERSTYLE,BACKGROUNDCOLOURS:"."+l.BACKGROUNDCOLOUR+' input[name="backgroundColour"]',SELECTEDBACKGROUNDCOLOUR:"."+l.BACKGROUNDCOLOUR+' input[name="backgroundColour"]:checked',FORM:".atto_form",WIDTH:"."+l.WIDTH,AVAILABLECOLORS:"."+l.AVAILABLECOLORS};v.namespace("M.atto_table").Button=v.Base.create("button",v.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){var t=this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"});require(["editor_atto/events"],function(e){t.getDOMNode().addEventListener(e.eventTypes.attoButtonHighlightToggled,function(e){this._setAriaAttributes(e.detail.buttonName,e.detail.highlight)}.bind(this))}.bind(this)),v.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_setAriaAttributes:function(e,t){e=this.buttons[e];e&&(t?(t=e.getAttribute("id"),e.setAttribute("aria-haspopup",!0),e.setAttribute("aria-controls",t+"_menu"),e.setAttribute("aria-expanded",!0)):(e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection(),!1===this._currentSelection||this._currentSelection.collapsed||(this.getDialogue({headerContent:M.util.get_string("createtable",m),focusAfterHide:!0,focusOnShowSelector:O.CAPTION,width:f}).set("bodyContent",this._getDialogueContent(!1)).show(),this._updateAvailableSettings())},_displayTableEditor:function(e){var t,o=this._getSuitableTableCell(),a=e.currentTarget.ancestor("button",!0);return o?(t=a.getAttribute("id"),a.setAttribute("aria-expanded",!0),e.tableCell=o,this._showTableMenu(e,t)):(a.removeAttribute("aria-expanded"),this._displayDialogue(e))},_stopAtContentEditableFilter:function(e){return this.editor.contains(e)},_getDialogueContent:function(e){var t=v.Handlebars.compile(
-'<form class="{{CSS.FORM}}"><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label></div><div class="col-sm-8"><input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required /></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_captionposition">{{get_string "captionposition" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select></div></div>{{#if nonedit}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_columns" >{{get_string "numberofcolumns" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/></div></div>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label></div><div class="col-sm-8"><select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borderstyle">{{get_string "borderstyles" component}}</label></div><div class="col-sm-8"><select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordersize">{{get_string "bordersize" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label>{{CSS.BORDERSIZEUNIT}}</label></div></div></div><div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordercolour">{{get_string "bordercolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_bordercolour"class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebordercolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" class="m-0" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" class="m-0" name="borderColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowBackgroundColour}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_backgroundcolour">{{get_string "backgroundcolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_backgroundcolour"class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebackgroundcolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" class="m-0" name="backgroundColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowWidth}}<div class="mb-1 form-group row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_width">{{get_string "width" component}}</label></div><div class="col-sm-8"><div class="form-inline"><input name="width" id="{{elementid}}_atto_table_width" class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label>{{CSS.WIDTHUNIT}}</label></div></div></div>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="btn btn-secondary submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="btn btn-secondary submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>'
-),o=this.get("allowBorders");return this._content=v.Node.create(t({CSS:l,elementid:this.get("host").get("elementid"),component:m,edit:e,nonedit:!e,allowStyling:this.get("allowStyling"),allowBorders:o,borderStyles:this.get("borderStyles"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:this.get("availableColors"),allowWidth:this.get("allowWidth")})),e?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),o&&this._content.one('[name="borders"]').on("change",this._updateAvailableSettings,this),this._content},_updateAvailableSettings:function(){var e=this._content,t=e.one('[name="borders"]'),o=e.one('[name="borderstyles"]'),a=e.one('[name="bordersize"]'),e=e.all('[name="borderColour"]'),n="removeAttribute";t&&("default"===t.get("value")&&(n="setAttribute"),o&&o[n]("disabled"),a&&a[n]("disabled"),e&&e[n]("disabled"))},_getSuitableTableCell:function(){var e,o=null,t=this.get("host"),a=v.bind(this._stopAtContentEditableFilter,this);return t.getSelectedNodes().some(function(e){var t;if(e.ancestor("td, th, caption",!0,a))return(e=(o=e).ancestor("caption",!0,a))&&(t=e.get("parentNode"))&&(o=t.one("td, th")),!0}),o&&(e=t.getSelectionFromNode(o),t.setSelection(e)),o},_changeNodeType:function(e,t){var o=v.Node.create("<"+t+"></"+t+">");return o.setAttrs(e.getAttrs()),e.get("childNodes").each(function(e){o.append(e.remove())}),e.replace(o),o},_updateTable:function(e){var t,o,a,n,r,l,i,s,d;e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(O.FORM).one(O.CAPTION),o=e.currentTarget.ancestor(O.FORM).one(O.CAPTIONPOSITION),a=e.currentTarget.ancestor(O.FORM).one(O.HEADERS),d=e.currentTarget.ancestor(O.FORM).one(O.BORDERS),n=e.currentTarget.ancestor(O.FORM).one(O.BORDERSIZE),l=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBORDERCOLOUR),r=e.currentTarget.ancestor(O.FORM).one(O.BORDERSTYLE),i=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBACKGROUNDCOLOUR),e=e.currentTarget.ancestor(O.FORM).one(O.WIDTH),s=this._lastTarget.ancestor("table"),this._setAppearance(s,{width:e,borders:d,borderColour:l,borderSize:n,borderStyle:r,backgroundColour:i}),(e=s.one("caption"))||(e=v.Node.create("<caption></caption>"),s.insert(e,0)),e.setHTML(t.get("value")),e.setStyle("caption-side",o.get("value")),e.getAttribute("style")||e.removeAttribute("style"),"rows"!==a.get("value")&&"both"!==a.get("value")||s.all("tr").each(function(e){var e=e.all("th, td"),t=e.shift();("TD"===t.get("tagName")?this._changeNodeType(t,"th"):t).setAttribute("scope","row"),e.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this),"columns"!==a.get("value")&&"both"!==a.get("value")||((d=s.all("tr")).shift().all("td, th").each(function(e){("TD"===e.get("tagName")?this._changeNodeType(e,"th"):e).setAttribute("scope","col")},this),d.each(function(e){e=e.all("th, td");"both"===a.get("value")&&e.shift(),e.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this)),this.markUpdated()},_setTable:function(e){var t,c,u,g,h,b,o,a,n,m,r,l,i,_,s,d;if(e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(O.FORM).one(O.CAPTION),d=e.currentTarget.ancestor(O.FORM).one(O.CAPTIONPOSITION),c=e.currentTarget.ancestor(O.FORM).one(O.BORDERS),u=e.currentTarget.ancestor(O.FORM).one(O.BORDERSIZE),h=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBORDERCOLOUR),g=e.currentTarget.ancestor(O.FORM).one(O.BORDERSTYLE),m=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBACKGROUNDCOLOUR),b=e.currentTarget.ancestor(O.FORM).one(O.ROWS),o=e.currentTarget.ancestor(O.FORM).one(O.COLUMNS),a=e.currentTarget.ancestor(O.FORM).one(O.HEADERS),e=e.currentTarget.ancestor(O.FORM).one(O.WIDTH),this.get("host").setSelection(this._currentSelection),i="\n",n='<br/>\n<table id="'+(_=v.guid())+'">'+i,s="",n+="<caption"+(s=d.get("value")?' style="caption-side: '+d.get("value")+'"':s)+">"+v.Escape.html(t.get("value"))+"</caption>"+i,r=0,"columns"===a.get("value")||"both"===a.get("value")){for(r=1,n+="<thead>\n<tr>\n",l=0;l<parseInt(o.get("value"),10);l++)n+='<th scope="col"></th>\n';n+="</tr>\n</thead>\n"}for(n+="<tbody>\n";r<parseInt(b.get("value"),10);r++){for(n+="<tr>\n",l=0;l<parseInt(o.get("value"),10);l++)0!==l||"rows"!==a.get("value")&&"both"!==a.get("value")?n+="<td ></td>\n":n+='<th scope="row"></th>\n';n+="</tr>\n"}n+="</tbody>\n</table>\n<br/>",this.get("host").insertContentAtFocusPoint(n),d=v.one("#"+_),this._setAppearance(d,{width:e,borders:c,borderColour:h,borderSize:u,borderStyle:g,backgroundColour:m}),d.removeAttribute("id"),this.markUpdated()},_findColumnCells:function(){var a=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),n=new v.NodeList,r=new v.NodeList,l=new v.NodeList;return e.each(function(e){var e=e.all("td, th"),t=e.item(a),o=e.item(a-1),e=e.item(a+1);n.push(t),o&&r.push(o),e&&l.push(e)}),{current:n,prev:r,next:l}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),o=this._lastTarget.ancestor("tr"),t=t.all("tr"),a=t.indexOf(o),n=t.item(a-1),n=n?n.one("td"):null;o&&n?e.one('[data-change="moverowup"]').show():e.one('[data-change="moverowup"]').hide(),n=t.item(a+1),a=!!o&&o.one("td"),o&&n&&a?e.one('[data-change="moverowdown"]').show():e.one('[data-change="moverowdown"]').hide(),0<(t=this._findColumnCells()).prev.filter("td").size()?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide(),n=0<t.current.filter("td").size(),0<t.next.size()&&n?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),0<t.current.filter("td").size()?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),o&&o.one("td")?e.one('[data-change="deleterow"]').show():e.one('[data-change="deleterow"]').hide()},_showTableMenu:function(e,t){var o,a;e.preventDefault(),
-a=this.buttons[this.name],this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",m),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",m),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",m),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",m),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",m),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",m),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",m),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",m),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",m),data:{change:"edittable"}}],a.insert(v.Node.create('<div class="menuplaceholder" id="'+t+'_menu"></div>'),"after"),this._contextMenu=new v.M.editor_atto.Menu({items:this._menuOptions,buttonId:t,attachmentPoint:"#"+t+"_menu"}),(o=this._contextMenu.get("boundingBox")).delegate("click",this._handleTableChange,"a",this)),o=this._contextMenu.get("boundingBox"),this._lastTarget=e.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(o),v.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)}),this.get("host")._setTabFocus(a),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[v.WidgetPositionAlign.TL,v.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",a),o.one("a")&&o.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){switch(e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e),e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),e=e.ancestor("tr");if(t&&e)return t.all("tr").indexOf(e)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(t)return t.all("td, th").indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");e&&t&&(e.swap(t),this.markUpdated())},_moveColumnLeft:function(){var e,t,o,a=this._findColumnCells();if(0<a.current.size()&&0<a.prev.size()&&a.current.size()===a.prev.size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.prev.item(e),t.swap(o);this.markUpdated()},_addCaption:function(){var e=this._lastTarget.ancestor("table");e.one("caption")||e.insert(v.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table").one("caption");e&&e.remove(!0)},_moveColumnRight:function(){var e,t,o,a=this._findColumnCells();if(0<a.next.size()&&a.current.size()===a.next.size()&&0<a.current.filter("td").size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.next.item(e),t.swap(o);this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");e&&t&&e.one("td")&&(e.swap(t),this.markUpdated())},_getBorderConfiguration:function(e){var e=e.cloneNode(!0),t=e.getStyle("borderStyle"),o=e.getStyle("borderColor"),e=e.getStyle("borderWidth");return!!(t||o||e)&&(o=v.Color.toHex(o),e=parseInt(e,10),{borderStyle:t,borderColor:"#"===o?null:o,borderWidth:isNaN(e)?null:e})},_setAppearance:function(e,t){var o,a,n,r;t.borderColour&&(o=t.borderColour.get("value")),t.borderSize&&(a=t.borderSize.get("value")),t.borderStyle&&(n=t.borderStyle.get("value")),t.backgroundColour&&(r=t.backgroundColour.get("value")),e.removeAttribute("style"),e.all("td, th").each(function(e){e.removeAttribute("style")},this),t.borders&&("outer"===t.borders.get("value")?(e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)):"all"===t.borders.get("value")&&e.all("td, th").each(function(e){e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)},this)),"none"!==r&&e.setStyle("backgroundColor",r),t.width&&t.width.get("value")&&e.setStyle("width",t.width.get("value")+l.WIDTHUNIT)},_editTable:function(){var e,t,o=this.getDialogue({headerContent:M.util.get_string("edittable",m),focusAfterHide:!1,focusOnShowSelector:O.CAPTION,width:f}),a=this._getDialogueContent(!0),n=a.one(O.CAPTION),r=a.one(O.CAPTIONPOSITION),c=a.one(O.HEADERS),u=a.one(O.BORDERS),g=a.one(O.BORDERSTYLE),h=a.all(O.BORDERCOLOURS),b=a.one(O.BORDERSIZE),l=a.all(O.BACKGROUNDCOLOURS),i=a.one(O.WIDTH),s=this._lastTarget.ancestor("table"),d=s.one("caption");d?n.set("value",d.getHTML()):n.set("value",""),i&&-1===s.getStyle("width").indexOf("px")&&i.set("value",parseInt(s.getStyle("width"),10)),r&&d&&d.getAttribute("style")?r.set("value",d.getStyle("caption-side")):r.set("value",""),s.getStyle("backgroundColor")&&this.get("allowBackgroundColour")&&(e=v.Color.toHex(s.getStyle("backgroundColor")),(t=l.filter('[value="'+e+'"]'))&&t.set("checked",!0)),this.get("allowBorders")&&(n="default",(i=this._getBorderConfiguration(s))?n="outer":(i=this._getBorderConfiguration(s.one("td")))&&(n="all"),i&&(d=i.borderStyle||_,r=i.borderWidth||p,g.set("value",d),b.set("value",r),u.set("value",n),e=i.borderColor,(t=h.filter('[value="'+e+'"]'))&&t.set("checked",!0))),l="columns",s.one('th[scope="row"]')&&(l="rows",s.one('th[scope="col"]')&&(l="both")),c.set("value",l),o.set("bodyContent",a).show(),this._updateAvailableSettings()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),o=new v.NodeList,a=!1;e.each(function(e){e=e.all("td, th"),e=e.item(t);"TD"===e.get("tagName")&&(a=!0),o.push(e)}),a&&o.remove(!0
+'<form class="{{CSS.FORM}}"><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 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_captionposition">{{get_string "captionposition" component}}</label></div><div class="col-sm-8"><select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select></div></div><div class="mb-1 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"><select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select></div></div>{{#if nonedit}}<div class="mb-1 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"><input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/></div></div><div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_columns" >{{get_string "numberofcolumns" component}}</label></div><div class="col-sm-8"><input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/></div></div>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<div class="mb-1 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"><select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select></div></div><div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_borderstyle">{{get_string "borderstyles" component}}</label></div><div class="col-sm-8"><select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select></div></div><div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordersize">{{get_string "bordersize" component}}</label></div><div class="col-sm-8"><div class="d-flex flex-wrap align-items-center"><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label>{{CSS.BORDERSIZEUNIT}}</label></div></div></div><div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_bordercolour">{{get_string "bordercolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_bordercolour"class="d-flex flex-wrap align-items-center {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebordercolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" class="m-0" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" class="m-0" name="borderColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowBackgroundColour}}<div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_backgroundcolour">{{get_string "backgroundcolour" component}}</label></div><div class="col-sm-8"><div id="{{elementid}}_atto_table_backgroundcolour"class="d-flex flex-wrap align-items-center {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebackgroundcolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" class="m-0" name="backgroundColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowWidth}}<div class="mb-1 mb-3 row"><div class="col-sm-4"><label for="{{elementid}}_atto_table_width">{{get_string "width" component}}</label></div><div class="col-sm-8"><div class="d-flex flex-wrap align-items-center"><input name="width" id="{{elementid}}_atto_table_width" class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label>{{CSS.WIDTHUNIT}}</label></div></div></div>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="btn btn-secondary submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="btn btn-secondary submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>'
+),o=this.get("allowBorders");return this._content=v.Node.create(t({CSS:l,elementid:this.get("host").get("elementid"),component:m,edit:e,nonedit:!e,allowStyling:this.get("allowStyling"),allowBorders:o,borderStyles:this.get("borderStyles"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:this.get("availableColors"),allowWidth:this.get("allowWidth")})),e?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),o&&this._content.one('[name="borders"]').on("change",this._updateAvailableSettings,this),this._content},_updateAvailableSettings:function(){var e=this._content,t=e.one('[name="borders"]'),o=e.one('[name="borderstyles"]'),a=e.one('[name="bordersize"]'),e=e.all('[name="borderColour"]'),n="removeAttribute";t&&("default"===t.get("value")&&(n="setAttribute"),o&&o[n]("disabled"),a&&a[n]("disabled"),e&&e[n]("disabled"))},_getSuitableTableCell:function(){var e,o=null,t=this.get("host"),a=v.bind(this._stopAtContentEditableFilter,this);return t.getSelectedNodes().some(function(e){var t;if(e.ancestor("td, th, caption",!0,a))return(e=(o=e).ancestor("caption",!0,a))&&(t=e.get("parentNode"))&&(o=t.one("td, th")),!0}),o&&(e=t.getSelectionFromNode(o),t.setSelection(e)),o},_changeNodeType:function(e,t){var o=v.Node.create("<"+t+"></"+t+">");return o.setAttrs(e.getAttrs()),e.get("childNodes").each(function(e){o.append(e.remove())}),e.replace(o),o},_updateTable:function(e){var t,o,a,n,r,l,i,s,d;e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(O.FORM).one(O.CAPTION),o=e.currentTarget.ancestor(O.FORM).one(O.CAPTIONPOSITION),a=e.currentTarget.ancestor(O.FORM).one(O.HEADERS),d=e.currentTarget.ancestor(O.FORM).one(O.BORDERS),n=e.currentTarget.ancestor(O.FORM).one(O.BORDERSIZE),l=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBORDERCOLOUR),r=e.currentTarget.ancestor(O.FORM).one(O.BORDERSTYLE),i=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBACKGROUNDCOLOUR),e=e.currentTarget.ancestor(O.FORM).one(O.WIDTH),s=this._lastTarget.ancestor("table"),this._setAppearance(s,{width:e,borders:d,borderColour:l,borderSize:n,borderStyle:r,backgroundColour:i}),(e=s.one("caption"))||(e=v.Node.create("<caption></caption>"),s.insert(e,0)),e.setHTML(t.get("value")),e.setStyle("caption-side",o.get("value")),e.getAttribute("style")||e.removeAttribute("style"),"rows"!==a.get("value")&&"both"!==a.get("value")||s.all("tr").each(function(e){var e=e.all("th, td"),t=e.shift();("TD"===t.get("tagName")?this._changeNodeType(t,"th"):t).setAttribute("scope","row"),e.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this),"columns"!==a.get("value")&&"both"!==a.get("value")||((d=s.all("tr")).shift().all("td, th").each(function(e){("TD"===e.get("tagName")?this._changeNodeType(e,"th"):e).setAttribute("scope","col")},this),d.each(function(e){e=e.all("th, td");"both"===a.get("value")&&e.shift(),e.each(function(e){"TH"===e.get("tagName")&&this._changeNodeType(e,"td").removeAttribute("scope")},this)},this)),this.markUpdated()},_setTable:function(e){var t,c,u,b,g,h,o,a,n,m,r,l,i,_,s,d;if(e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=e.currentTarget.ancestor(O.FORM).one(O.CAPTION),d=e.currentTarget.ancestor(O.FORM).one(O.CAPTIONPOSITION),c=e.currentTarget.ancestor(O.FORM).one(O.BORDERS),u=e.currentTarget.ancestor(O.FORM).one(O.BORDERSIZE),g=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBORDERCOLOUR),b=e.currentTarget.ancestor(O.FORM).one(O.BORDERSTYLE),m=e.currentTarget.ancestor(O.FORM).one(O.SELECTEDBACKGROUNDCOLOUR),h=e.currentTarget.ancestor(O.FORM).one(O.ROWS),o=e.currentTarget.ancestor(O.FORM).one(O.COLUMNS),a=e.currentTarget.ancestor(O.FORM).one(O.HEADERS),e=e.currentTarget.ancestor(O.FORM).one(O.WIDTH),this.get("host").setSelection(this._currentSelection),i="\n",n='<br/>\n<table id="'+(_=v.guid())+'">'+i,s="",n+="<caption"+(s=d.get("value")?' style="caption-side: '+d.get("value")+'"':s)+">"+v.Escape.html(t.get("value"))+"</caption>"+i,r=0,"columns"===a.get("value")||"both"===a.get("value")){for(r=1,n+="<thead>\n<tr>\n",l=0;l<parseInt(o.get("value"),10);l++)n+='<th scope="col"></th>\n';n+="</tr>\n</thead>\n"}for(n+="<tbody>\n";r<parseInt(h.get("value"),10);r++){for(n+="<tr>\n",l=0;l<parseInt(o.get("value"),10);l++)0!==l||"rows"!==a.get("value")&&"both"!==a.get("value")?n+="<td ></td>\n":n+='<th scope="row"></th>\n';n+="</tr>\n"}n+="</tbody>\n</table>\n<br/>",this.get("host").insertContentAtFocusPoint(n),d=v.one("#"+_),this._setAppearance(d,{width:e,borders:c,borderColour:g,borderSize:u,borderStyle:b,backgroundColour:m}),d.removeAttribute("id"),this.markUpdated()},_findColumnCells:function(){var a=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),n=new v.NodeList,r=new v.NodeList,l=new v.NodeList;return e.each(function(e){var e=e.all("td, th"),t=e.item(a),o=e.item(a-1),e=e.item(a+1);n.push(t),o&&r.push(o),e&&l.push(e)}),{current:n,prev:r,next:l}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),o=this._lastTarget.ancestor("tr"),t=t.all("tr"),a=t.indexOf(o),n=t.item(a-1),n=n?n.one("td"):null;o&&n?e.one('[data-change="moverowup"]').show():e.one('[data-change="moverowup"]').hide(),n=t.item(a+1),a=!!o&&o.one("td"),o&&n&&a?e.one('[data-change="moverowdown"]').show():e.one('[data-change="moverowdown"]').hide(),0<(t=this._findColumnCells()).prev.filter("td").size()?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide(),n=0<t.current.filter("td").size(),0<t.next.size()&&n?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),0<t.current.filter("td").size()?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),o&&o.one("td")?e.one('[data-change="deleterow"]').show():e.one('[data-change="deleterow"]').hide()},_showTableMenu:function(e,t){var o,a;e.preventDefault(),
+a=this.buttons[this.name],this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",m),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",m),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",m),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",m),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",m),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",m),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",m),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",m),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",m),data:{change:"edittable"}}],a.insert(v.Node.create('<div class="menuplaceholder" id="'+t+'_menu"></div>'),"after"),this._contextMenu=new v.M.editor_atto.Menu({items:this._menuOptions,buttonId:t,attachmentPoint:"#"+t+"_menu"}),(o=this._contextMenu.get("boundingBox")).delegate("click",this._handleTableChange,"a",this)),o=this._contextMenu.get("boundingBox"),this._lastTarget=e.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(o),v.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)}),this.get("host")._setTabFocus(a),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[v.WidgetPositionAlign.TL,v.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",a),o.one("a")&&o.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){switch(e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e),e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),e=e.ancestor("tr");if(t&&e)return t.all("tr").indexOf(e)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(t)return t.all("td, th").indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");e&&t&&(e.swap(t),this.markUpdated())},_moveColumnLeft:function(){var e,t,o,a=this._findColumnCells();if(0<a.current.size()&&0<a.prev.size()&&a.current.size()===a.prev.size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.prev.item(e),t.swap(o);this.markUpdated()},_addCaption:function(){var e=this._lastTarget.ancestor("table");e.one("caption")||e.insert(v.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table").one("caption");e&&e.remove(!0)},_moveColumnRight:function(){var e,t,o,a=this._findColumnCells();if(0<a.next.size()&&a.current.size()===a.next.size()&&0<a.current.filter("td").size())for(e=e=0;e<a.current.size();e++)t=a.current.item(e),o=a.next.item(e),t.swap(o);this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");e&&t&&e.one("td")&&(e.swap(t),this.markUpdated())},_getBorderConfiguration:function(e){var e=e.cloneNode(!0),t=e.getStyle("borderStyle"),o=e.getStyle("borderColor"),e=e.getStyle("borderWidth");return!!(t||o||e)&&(o=v.Color.toHex(o),e=parseInt(e,10),{borderStyle:t,borderColor:"#"===o?null:o,borderWidth:isNaN(e)?null:e})},_setAppearance:function(e,t){var o,a,n,r;t.borderColour&&(o=t.borderColour.get("value")),t.borderSize&&(a=t.borderSize.get("value")),t.borderStyle&&(n=t.borderStyle.get("value")),t.backgroundColour&&(r=t.backgroundColour.get("value")),e.removeAttribute("style"),e.all("td, th").each(function(e){e.removeAttribute("style")},this),t.borders&&("outer"===t.borders.get("value")?(e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)):"all"===t.borders.get("value")&&e.all("td, th").each(function(e){e.setStyle("borderWidth",a+l.BORDERSIZEUNIT),e.setStyle("borderStyle",n),"none"!==o&&e.setStyle("borderColor",o)},this)),"none"!==r&&e.setStyle("backgroundColor",r),t.width&&t.width.get("value")&&e.setStyle("width",t.width.get("value")+l.WIDTHUNIT)},_editTable:function(){var e,t,o=this.getDialogue({headerContent:M.util.get_string("edittable",m),focusAfterHide:!1,focusOnShowSelector:O.CAPTION,width:f}),a=this._getDialogueContent(!0),n=a.one(O.CAPTION),r=a.one(O.CAPTIONPOSITION),c=a.one(O.HEADERS),u=a.one(O.BORDERS),b=a.one(O.BORDERSTYLE),g=a.all(O.BORDERCOLOURS),h=a.one(O.BORDERSIZE),l=a.all(O.BACKGROUNDCOLOURS),i=a.one(O.WIDTH),s=this._lastTarget.ancestor("table"),d=s.one("caption");d?n.set("value",d.getHTML()):n.set("value",""),i&&-1===s.getStyle("width").indexOf("px")&&i.set("value",parseInt(s.getStyle("width"),10)),r&&d&&d.getAttribute("style")?r.set("value",d.getStyle("caption-side")):r.set("value",""),s.getStyle("backgroundColor")&&this.get("allowBackgroundColour")&&(e=v.Color.toHex(s.getStyle("backgroundColor")),(t=l.filter('[value="'+e+'"]'))&&t.set("checked",!0)),this.get("allowBorders")&&(n="default",(i=this._getBorderConfiguration(s))?n="outer":(i=this._getBorderConfiguration(s.one("td")))&&(n="all"),i&&(d=i.borderStyle||_,r=i.borderWidth||p,b.set("value",d),h.set("value",r),u.set("value",n),e=i.borderColor,(t=g.filter('[value="'+e+'"]'))&&t.set("checked",!0))),l="columns",s.one('th[scope="row"]')&&(l="rows",s.one('th[scope="col"]')&&(l="both")),c.set("value",l),o.set("bodyContent",a).show(),this._updateAvailableSettings()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),e=this._lastTarget.ancestor("table").all("tr"),o=new v.NodeList,a=!1;e.each(function(e){e=e.all("td, th"),e=e.item(t);"TD"===e.get("tagName")&&(a=!0),o.push(e)}),a&&o.remove(!0
 ),this.markUpdated()},_addRowAfter:function(){var e,t=this._lastTarget.ancestor("tr"),o=this._lastTarget.ancestor("table").one("tbody"),o=o||this._lastTarget.ancestor("table"),a=o.one("tr"),a=a||this._lastTarget.ancestor("table").one("tr");a&&((e=a.cloneNode(!0)).all("th, td").each(function(e){var t;"TH"===e.get("tagName")&&"row"!==e.getAttribute("scope")&&(t=v.Node.create("<td></td>"),e.replace(t),e=t),e.setHTML("&nbsp;")}),t.ancestor("thead")?(t=a,o.insert(e,t)):t.insert(e,"after"),this.markUpdated())},_addColumnAfter:function(){var e=this._findColumnCells(),o=!0,t=e.next;e.next.size()<=0&&(o=!1,t=e.current),v.each(t,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),o?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}},{ATTRS:{allowBorders:{value:!0},borderStyles:{value:["none","solid","dashed","dotted"]},allowBackgroundColour:{value:!0},allowWidth:{value:!0},allowStyling:{readOnly:!0,getter:function(){return this.get("allowBorders")||this.get("allowBackgroundColour")||this.get("allowWidth")}},availableColors:{value:["#FFFFFF","#EF4540","#FFCF35","#98CA3E","#7D9FD3","#333333"],readOnly:!0}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
index 7a56feedb94..0b806299c5a 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
@@ -126,7 +126,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
                     'class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
@@ -140,7 +140,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "bordercolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
                             'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
@@ -167,7 +167,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "backgroundcolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
                             'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
@@ -194,7 +194,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="width" id="{{elementid}}_atto_table_width" ' +
                         'class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
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 d8ed3d340be..ead187b46d3 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
@@ -124,7 +124,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
                     'class="form-control w-auto mr-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
@@ -138,7 +138,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "bordercolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
                             'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
@@ -165,7 +165,7 @@ var COMPONENT = 'atto_table',
                     '{{get_string "backgroundcolour" component}}</label>' +
                     '</div><div class="col-sm-8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                    'class="d-flex flex-wrap align-items-center {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
                         '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
                             'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
@@ -192,7 +192,7 @@ var COMPONENT = 'atto_table',
                     '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
                     '</div><div class="col-sm-8">' +
-                    '<div class="form-inline">' +
+                    '<div class="d-flex flex-wrap align-items-center">' +
                     '<input name="width" id="{{elementid}}_atto_table_width" ' +
                         'class="form-control w-auto mr-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
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 905442d7e52..96bef295be9 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
@@ -119,7 +119,7 @@
             <div class="clearfix"></div>
             <div class="mb-1">
                 <label>{{#str}} size, tiny_media {{/str}}</label>
-                <div class="form-inline tiny_media_poster_size">
+                <div class="d-flex flex-wrap align-items-center tiny_media_poster_size">
                     <label for="vdisplayoptions_media-width-entry" class="accesshide">{{#str}} videowidth, tiny_media {{/str}}</label>
                     <input id="vdisplayoptions_media-width-entry" type="text" class="form-control mr-1 tiny_media_width_entry input-mini"
                            size="4" value="{{video.width}}"/>
diff --git a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
index a45d08ed38b..772db234c1f 100644
--- a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
+++ b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
@@ -72,7 +72,7 @@
             </div>
             <div class="mb-1">
                 <label class="" for="{{elementid}}_tiny_image_size">{{#str}} size, tiny_media {{/str}}</label>
-                <div id="{{elementid}}_tiny_image_size" class="form-inline tiny_image_size">
+                <div id="{{elementid}}_tiny_image_size" class="d-flex flex-wrap align-items-center tiny_image_size">
                     <label class="accesshide" for="{{elementid}}_tiny_image_widthentry">{{#str}} width, tiny_media {{/str}}</label>
                     <input type="text" class="form-control mr-1 input-mini tiny_image_widthentry" id="{{elementid}}_tiny_image_widthentry" size="4" value="{{width}}"/>
                     x
@@ -85,7 +85,7 @@
                     </div>
                 </div>
             </div>
-            <div class="form-inline mb-1">
+            <div class="d-flex flex-wrap align-items-center mb-1">
                 <label for="{{elementid}}_tiny_image_alignment">{{#str}} alignment, tiny_media {{/str}}</label>
                 <select class="custom-select tiny_image_alignment" id="{{elementid}}_tiny_image_alignment">
                     {{#alignoptions}}
diff --git a/lib/form/templates/element-template.mustache b/lib/form/templates/element-template.mustache
index d29d99303cb..3b91d27dfbf 100644
--- a/lib/form/templates/element-template.mustache
+++ b/lib/form/templates/element-template.mustache
@@ -65,7 +65,7 @@
             {{{helpbutton}}}
         </div>
     </div>
-    <div class="col-md-9 form-inline align-items-start felement" data-fieldtype="{{element.type}}">
+    <div class="col-md-9 d-flex flex-wrap align-items-start felement" data-fieldtype="{{element.type}}">
         {{$ element }}
             <!-- Element goes here -->
         {{/ element }}
diff --git a/lib/templates/dataformat_selector.mustache b/lib/templates/dataformat_selector.mustache
index 3e6fa78db4b..da2320ab97f 100644
--- a/lib/templates/dataformat_selector.mustache
+++ b/lib/templates/dataformat_selector.mustache
@@ -39,7 +39,7 @@
     }
 }}
 <form method="get" action="{{base}}" class="dataformatselector m-1">
-    <div class="form-inline text-xs-right">
+    <div class="d-flex flex-wrap align-items-end text-xs-right">
         <input type="hidden" name="sesskey" value="{{sesskey}}">
         <label for="downloadtype_{{name}}" class="mr-1">{{label}}</label>
         <select name="{{name}}" id="downloadtype_{{name}}" class="form-control custom-select mr-1">
diff --git a/lib/templates/filemanager_fileselect.mustache b/lib/templates/filemanager_fileselect.mustache
index 38af30d9b44..dd36362d22e 100644
--- a/lib/templates/filemanager_fileselect.mustache
+++ b/lib/templates/filemanager_fileselect.mustache
@@ -45,11 +45,11 @@
 
                 <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 class="col-8 d-flex flex-wrap align-items-center"><input class="form-control" type="text"/></div>
                 </div>
                 <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 class="col-8 d-flex flex-wrap align-items-center"><input class="form-control" type="text"/></div>
 
                 </div>
                 <div class="fp-license mb-3 row mx-0">
@@ -57,19 +57,19 @@
                 </div>
                 <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">
+                    <div class="col-8 d-flex flex-wrap align-items-center pr-0">
                         <select class="custom-select form-control"></select>
                     </div>
                 </div>
                 <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">
+                    <div class="col-8 d-flex flex-wrap align-items-center">
                         <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 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">
+                    <div class="col-8 d-flex flex-wrap align-items-center">
                         <p class="fp-refcount"></p>
                         <span class="fp-reflistloading">{{#pix}}i/loading_small{{/pix}} {{#str}}loading, repository{{/str}}</span>
                         <ul class="fp-value"></ul>
diff --git a/lib/templates/filemanager_loginform.mustache b/lib/templates/filemanager_loginform.mustache
index afe90ab3fb3..6091dc4dcce 100644
--- a/lib/templates/filemanager_loginform.mustache
+++ b/lib/templates/filemanager_loginform.mustache
@@ -32,7 +32,7 @@
                     <label class="form-control-label"></label>
                     <div class="fp-login-radio"><input class="form-control" /> <label></label></div>
                 </div>
-                <div class="fp-login-checkbox mb-3 form-inline">
+                <div class="fp-login-checkbox mb-3 d-flex flex-wrap align-items-center">
                     <label class="form-control-label"></label>
                     <input class="form-control"/>
                 </div>
diff --git a/lib/templates/search_input.mustache b/lib/templates/search_input.mustache
index 0b059d56f57..105e4f177c3 100644
--- a/lib/templates/search_input.mustache
+++ b/lib/templates/search_input.mustache
@@ -45,7 +45,7 @@
 }}
 <div class="simplesearchform {{ extraclasses }}">
     {{^inform}}
-    <form autocomplete="off" action="{{ action }}" method="get" accept-charset="utf-8" class="mform form-inline simplesearchform">
+    <form autocomplete="off" action="{{ action }}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center simplesearchform">
     {{/inform}}
     {{#hiddenfields}}
         <input type="hidden" name="{{ name }}" value="{{ value }}">
diff --git a/lib/templates/search_input_auto.mustache b/lib/templates/search_input_auto.mustache
index f88f9e819d7..ff04a850aae 100644
--- a/lib/templates/search_input_auto.mustache
+++ b/lib/templates/search_input_auto.mustache
@@ -36,7 +36,7 @@
         ]
     }
 }}
-<div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
+<div id="searchform-auto-{{uniqid}}" class="d-flex flex-wrap align-items-center simplesearchform">
     <div class="input-group searchbar w-100" role="search">
         <label for="searchinput-{{uniqid}}">
             <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
diff --git a/lib/templates/search_input_navbar.mustache b/lib/templates/search_input_navbar.mustache
index 1bf57a34977..8aa0a5ce840 100644
--- a/lib/templates/search_input_navbar.mustache
+++ b/lib/templates/search_input_navbar.mustache
@@ -34,7 +34,7 @@
 }}
 <div id="searchinput-navbar-{{uniqid}}" class="simplesearchform">
     <div class="collapse" id="searchform-navbar">
-        <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform form-inline searchform-navbar">
+        <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center searchform-navbar">
             {{#hiddenfields}}
                 <input type="hidden" name="{{ name }}" value="{{ value }}">
             {{/hiddenfields}}
diff --git a/lib/templates/single_select.mustache b/lib/templates/single_select.mustache
index 302375bfc5e..5b034c6ea56 100644
--- a/lib/templates/single_select.mustache
+++ b/lib/templates/single_select.mustache
@@ -83,7 +83,7 @@
 }}
 
 <div class="{{classes}} d-inline-block">
-    <form method="{{method}}" action="{{action}}" class="form-inline" id="{{formid}}">
+    <form method="{{method}}" action="{{action}}" class="d-flex flex-wrap align-items-center" id="{{formid}}">
         {{#params}}
             <input type="hidden" name="{{name}}" value="{{value}}">
         {{/params}}
diff --git a/lib/templates/url_select.mustache b/lib/templates/url_select.mustache
index 845cee450b1..f735afb6fd7 100644
--- a/lib/templates/url_select.mustache
+++ b/lib/templates/url_select.mustache
@@ -38,7 +38,7 @@
     }
 }}
 <div class="{{classes}}">
-    <form method="post" action="{{action}}" class="form-inline" id="{{formid}}">
+    <form method="post" action="{{action}}" class="d-flex flex-wrap align-items-center" id="{{formid}}">
         <input type="hidden" name="sesskey" value="{{sesskey}}">
         {{#label}}
             <label for="{{id}}"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>
diff --git a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-debug.js b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-debug.js
index 32d544a1961..f8b982671aa 100644
--- a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-debug.js
+++ b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-debug.js
@@ -101,9 +101,11 @@ Y.extend(CONFIRM, M.core.notification.info, {
         this._question = Y.Node.create('<div class="confirmation-message">' + this.get(QUESTION) + '</div>');
         var content = Y.Node.create('<div class="confirmation-dialogue"></div>')
                         .append(this._question)
-                        .append(Y.Node.create('<div class="confirmation-buttons form-inline justify-content-around"></div>')
-                            .append(this._yesButton)
-                            .append(this._noButton));
+                        .append(Y.Node.create(
+                            '<div class="confirmation-buttons d-flex flex-wrap align-items-center justify-content-around"></div>'
+                        )
+                        .append(this._yesButton)
+                        .append(this._noButton));
         this.get(BASE).addClass('moodle-dialogue-confirm');
         this.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);
         this.setStdModContent(Y.WidgetStdMod.HEADER,
diff --git a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-min.js b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-min.js
index 54d27be352a..a1047c593d4 100644
--- a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-min.js
+++ b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm-min.js
@@ -1 +1 @@
-YUI.add("moodle-core-notification-confirm",function(i,t){var e;M.core=M.core||{},i.extend(e=function(t){e.superclass.constructor.apply(this,[t])},M.core.notification.info,{_closeEvents:null,_yesButton:null,_noButton:null,_question:null,initializer:function(){var t;window.console.error('The module "moodle-core-notification-confirm" module has been deprecated and will be removed in Moodle 4.4.'),this._closeEvents=[],this.publish("complete"),this.publish("complete-yes"),this.publish("complete-no"),this._yesButton=i.Node.create('<input type="button" class="btn btn-primary" id="id_yuiconfirmyes-'+this.get("COUNT")+'" value="'+this.get("yesLabel")+'" />'),this._noButton=i.Node.create('<input type="button" class="btn btn-secondary" id="id_yuiconfirmno-'+this.get("COUNT")+'" value="'+this.get("noLabel")+'" />'),this._question=i.Node.create('<div class="confirmation-message">'+this.get("question")+"</div>"),t=i.Node.create('<div class="confirmation-dialogue"></div>').append(this._question).append(i.Node.create('<div class="confirmation-buttons form-inline justify-content-around"></div>').append(this._yesButton).append(this._noButton)),this.get("notificationBase").addClass("moodle-dialogue-confirm"),this.setStdModContent(i.WidgetStdMod.BODY,t,i.WidgetStdMod.REPLACE),this.setStdModContent(i.WidgetStdMod.HEADER,'<h5 id="moodle-dialogue-'+this.get("COUNT")+'-wrap-header-text">'+this.get("title")+"</h5>",i.WidgetStdMod.REPLACE),this._closeEvents.push(i.on("key",this.submit,window,"down:27",this,!1),this._yesButton.on("click",this.submit,this,!0),this._noButton.on("click",this.submit,this,!1)),(t=this.get("boundingBox").one(".closebutton"))&&this._closeEvents.push(t.on("click",this.submit,this))},submit:function(t,e){new i.EventHandle(this._closeEvents).detach(),this.fire("complete",e),e?this.fire("complete-yes"):this.fire("complete-no"),this.hide(),this.destroy()}},{NAME:"Moodle confirmation dialogue",CSS_PREFIX:"moodle-dialogue",ATTRS:{yesLabel:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("yes","moodle")},setter:function(t){return this._yesButton&&this._yesButton.set("value",t),t}},noLabel:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("no","moodle")},setter:function(t){return this._noButton&&this._noButton.set("value",t),t}},title:{validator:i.Lang.isString,value:M.util.get_string("confirm","moodle")},question:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("areyousure","moodle")},setter:function(t){return this._question&&this._question.set("value",t),t}}}}),i.augment(e,i.EventTarget),M.core.confirm=e},"@VERSION@",{requires:["moodle-core-notification-dialogue"]});
\ No newline at end of file
+YUI.add("moodle-core-notification-confirm",function(i,t){var e;M.core=M.core||{},i.extend(e=function(t){e.superclass.constructor.apply(this,[t])},M.core.notification.info,{_closeEvents:null,_yesButton:null,_noButton:null,_question:null,initializer:function(){var t;window.console.error('The module "moodle-core-notification-confirm" module has been deprecated and will be removed in Moodle 4.4.'),this._closeEvents=[],this.publish("complete"),this.publish("complete-yes"),this.publish("complete-no"),this._yesButton=i.Node.create('<input type="button" class="btn btn-primary" id="id_yuiconfirmyes-'+this.get("COUNT")+'" value="'+this.get("yesLabel")+'" />'),this._noButton=i.Node.create('<input type="button" class="btn btn-secondary" id="id_yuiconfirmno-'+this.get("COUNT")+'" value="'+this.get("noLabel")+'" />'),this._question=i.Node.create('<div class="confirmation-message">'+this.get("question")+"</div>"),t=i.Node.create('<div class="confirmation-dialogue"></div>').append(this._question).append(i.Node.create('<div class="confirmation-buttons d-flex flex-wrap align-items-center justify-content-around"></div>').append(this._yesButton).append(this._noButton)),this.get("notificationBase").addClass("moodle-dialogue-confirm"),this.setStdModContent(i.WidgetStdMod.BODY,t,i.WidgetStdMod.REPLACE),this.setStdModContent(i.WidgetStdMod.HEADER,'<h5 id="moodle-dialogue-'+this.get("COUNT")+'-wrap-header-text">'+this.get("title")+"</h5>",i.WidgetStdMod.REPLACE),this._closeEvents.push(i.on("key",this.submit,window,"down:27",this,!1),this._yesButton.on("click",this.submit,this,!0),this._noButton.on("click",this.submit,this,!1)),(t=this.get("boundingBox").one(".closebutton"))&&this._closeEvents.push(t.on("click",this.submit,this))},submit:function(t,e){new i.EventHandle(this._closeEvents).detach(),this.fire("complete",e),e?this.fire("complete-yes"):this.fire("complete-no"),this.hide(),this.destroy()}},{NAME:"Moodle confirmation dialogue",CSS_PREFIX:"moodle-dialogue",ATTRS:{yesLabel:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("yes","moodle")},setter:function(t){return this._yesButton&&this._yesButton.set("value",t),t}},noLabel:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("no","moodle")},setter:function(t){return this._noButton&&this._noButton.set("value",t),t}},title:{validator:i.Lang.isString,value:M.util.get_string("confirm","moodle")},question:{validator:i.Lang.isString,valueFn:function(){return M.util.get_string("areyousure","moodle")},setter:function(t){return this._question&&this._question.set("value",t),t}}}}),i.augment(e,i.EventTarget),M.core.confirm=e},"@VERSION@",{requires:["moodle-core-notification-dialogue"]});
\ No newline at end of file
diff --git a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm.js b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm.js
index 32d544a1961..f8b982671aa 100644
--- a/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm.js
+++ b/lib/yui/build/moodle-core-notification-confirm/moodle-core-notification-confirm.js
@@ -101,9 +101,11 @@ Y.extend(CONFIRM, M.core.notification.info, {
         this._question = Y.Node.create('<div class="confirmation-message">' + this.get(QUESTION) + '</div>');
         var content = Y.Node.create('<div class="confirmation-dialogue"></div>')
                         .append(this._question)
-                        .append(Y.Node.create('<div class="confirmation-buttons form-inline justify-content-around"></div>')
-                            .append(this._yesButton)
-                            .append(this._noButton));
+                        .append(Y.Node.create(
+                            '<div class="confirmation-buttons d-flex flex-wrap align-items-center justify-content-around"></div>'
+                        )
+                        .append(this._yesButton)
+                        .append(this._noButton));
         this.get(BASE).addClass('moodle-dialogue-confirm');
         this.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);
         this.setStdModContent(Y.WidgetStdMod.HEADER,
diff --git a/lib/yui/src/notification/js/confirm.js b/lib/yui/src/notification/js/confirm.js
index fd0d7d94cd8..439d64d6697 100644
--- a/lib/yui/src/notification/js/confirm.js
+++ b/lib/yui/src/notification/js/confirm.js
@@ -71,9 +71,11 @@ Y.extend(CONFIRM, M.core.notification.info, {
         this._question = Y.Node.create('<div class="confirmation-message">' + this.get(QUESTION) + '</div>');
         var content = Y.Node.create('<div class="confirmation-dialogue"></div>')
                         .append(this._question)
-                        .append(Y.Node.create('<div class="confirmation-buttons form-inline justify-content-around"></div>')
-                            .append(this._yesButton)
-                            .append(this._noButton));
+                        .append(Y.Node.create(
+                            '<div class="confirmation-buttons d-flex flex-wrap align-items-center justify-content-around"></div>'
+                        )
+                        .append(this._yesButton)
+                        .append(this._noButton));
         this.get(BASE).addClass('moodle-dialogue-confirm');
         this.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);
         this.setStdModContent(Y.WidgetStdMod.HEADER,
diff --git a/mod/bigbluebuttonbn/templates/search_input_recordings.mustache b/mod/bigbluebuttonbn/templates/search_input_recordings.mustache
index 789f1fd507b..b6fcdff4b10 100644
--- a/mod/bigbluebuttonbn/templates/search_input_recordings.mustache
+++ b/mod/bigbluebuttonbn/templates/search_input_recordings.mustache
@@ -38,7 +38,7 @@
         ]
     }
 }}
-<div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
+<div id="searchform-auto-{{uniqid}}" class="d-flex flex-wrap align-items-center simplesearchform">
     <div class="input-group searchbar" role="search">
         <label for="mod_bigbluebutton_search-{{uniqid}}">
             <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
diff --git a/mod/chat/gui_ajax/index.php b/mod/chat/gui_ajax/index.php
index 9f2779e57e6..62a2703aaf8 100644
--- a/mod/chat/gui_ajax/index.php
+++ b/mod/chat/gui_ajax/index.php
@@ -97,16 +97,17 @@ echo $OUTPUT->box('', '', 'chat-options');
 echo $OUTPUT->box(html_writer::tag('h2',  get_string('messages', 'chat'), array('class' => 'accesshide')) .
         '<ul id="messages-list"></ul>', '', 'chat-messages');
 $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="mb-3"><input type="text" disabled="true" class="form-control" ' .
-          'id="input-message" value="Loading..." size="48" /></span>'.
-          '<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="mb-3 d-flex ml-auto"><a id="choosetheme" href="###">'.
-          get_string('themes').
-          ' &raquo; </a></div></div>'));
+$table->data = [[
+    '<div class="d-flex flex-wrap align-items-center"><div class="d-flex"><label class="accesshide" for="input-message">'.
+    get_string('entermessage', 'chat').' </label>'.
+    '<span class="mb-3"><input type="text" disabled="true" class="form-control" ' .
+    'id="input-message" value="Loading..." size="48" /></span>'.
+    '<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="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')) .
         html_writer::table($table), '', 'chat-input-area');
 echo $OUTPUT->box('', '', 'chat-notify');
diff --git a/mod/data/field/date/field.class.php b/mod/data/field/date/field.class.php
index df3c2130657..48dc75ae58b 100644
--- a/mod/data/field/date/field.class.php
+++ b/mod/data/field/date/field.class.php
@@ -79,7 +79,7 @@ class data_field_date extends data_field_base {
             $content = time();
         }
 
-        $str = '<div title="'.s($this->field->description).'" class="mod-data-input form-inline">';
+        $str = '<div title="'.s($this->field->description).'" class="mod-data-input d-flex flex-wrap align-items-center">';
 
         $dayselector = html_writer::select_time(
             type: 'days',
@@ -120,7 +120,7 @@ class data_field_date extends data_field_base {
             . html_writer::select_time('months', 'f_' . $this->field->id . '_m', $value['timestamp'] ?? $currenttime)
             . html_writer::select_time('years', 'f_' . $this->field->id . '_y', $value['timestamp'] ?? $currenttime);
         $datecheck = html_writer::checkbox('f_' . $this->field->id . '_z', 1, $value['usedate'] ?? 0);
-        $str = '<div class="form-inline">' . $selectors . ' ' . $datecheck . ' ' . get_string('usedate', 'data') . '</div>';
+        $str = '<div class="d-flex flex-wrap">' . $selectors . ' ' . $datecheck . ' ' . get_string('usedate', 'data') . '</div>';
 
         return $str;
     }
diff --git a/mod/data/field/latlong/field.class.php b/mod/data/field/latlong/field.class.php
index 4d25d261ecc..512f6152d2d 100644
--- a/mod/data/field/latlong/field.class.php
+++ b/mod/data/field/latlong/field.class.php
@@ -78,7 +78,7 @@ class data_field_latlong extends data_field_base {
         }
         $str = '<div title="'.s($this->field->description).'">';
         $str .= '<fieldset><legend><span class="accesshide">'.$this->field->name.'</span></legend>';
-        $str .= '<table class="form-inline"><tr><td align="right">';
+        $str .= '<table class="d-flex flex-wrap align-items-center"><tr><td align="right">';
         $classes = 'mod-data-input form-control-static';
         $str .= '<label for="field_'.$this->field->id.'_0" class="' . $classes . '">' . get_string('latitude', 'data');
         if ($this->field->required) {
diff --git a/mod/data/field/url/field.class.php b/mod/data/field/url/field.class.php
index 94527d2a4d4..c1ac5bd9cce 100644
--- a/mod/data/field/url/field.class.php
+++ b/mod/data/field/url/field.class.php
@@ -82,7 +82,7 @@ class data_field_url extends data_field_base {
 
         $autolinkable = !empty($this->field->param1) && empty($this->field->param2);
 
-        $str = '<div title="' . s($this->field->description) . '" class="form-inline">';
+        $str = '<div title="' . s($this->field->description) . '" class="d-flex flex-wrap align-items-center">';
 
         $label = '<label for="' . $fieldid . '"><span class="accesshide">' . $this->field->name . '</span>';
         if ($this->field->required) {
diff --git a/mod/data/lib.php b/mod/data/lib.php
index 321aa13c5ee..10465c593d9 100644
--- a/mod/data/lib.php
+++ b/mod/data/lib.php
@@ -1749,7 +1749,7 @@ function data_print_preference_form($data, $perpage, $search, $sort='', $order='
         $regsearchclass = 'search_inline';
         $advancedsearchclass = 'search_none';
     }
-    echo '<div id="reg_search" class="' . $regsearchclass . ' form-inline" >&nbsp;&nbsp;&nbsp;';
+    echo '<div id="reg_search" class="' . $regsearchclass . ' d-flex flex-wrap align-items-center" >&nbsp;&nbsp;&nbsp;';
     echo '<label for="pref_search">' . get_string('search') . '</label> <input type="text" ' .
          'class="form-control" size="16" name="search" id= "pref_search" value="' . s($search) . '" /></div>';
     echo '&nbsp;&nbsp;&nbsp;<label for="pref_sortby">'.get_string('sortby').'</label> ';
diff --git a/mod/forum/deprecatedlib.php b/mod/forum/deprecatedlib.php
index d07a1675f36..de88a07f225 100644
--- a/mod/forum/deprecatedlib.php
+++ b/mod/forum/deprecatedlib.php
@@ -442,8 +442,8 @@ function forum_update_subscriptions_button($courseid, $forumid): string {
         $edit = "on";
     }
 
-    $subscribers = html_writer::start_tag('form', array('action' => $CFG->wwwroot . '/mod/forum/subscribers.php',
-        'method' => 'get', 'class' => 'form-inline'));
+    $subscribers = html_writer::start_tag('form', ['action' => $CFG->wwwroot . '/mod/forum/subscribers.php',
+        'method' => 'get', 'class' => 'd-flex flex-wrap align-items-center']);
     $subscribers .= html_writer::empty_tag('input', array('type' => 'submit', 'value' => $string,
         'class' => 'btn btn-secondary'));
     $subscribers .= html_writer::empty_tag('input', array('type' => 'hidden', 'name' => 'id', 'value' => $forumid));
diff --git a/mod/forum/report/summary/templates/bulk_action_menu.mustache b/mod/forum/report/summary/templates/bulk_action_menu.mustache
index f2b1224549e..e3d791153ef 100644
--- a/mod/forum/report/summary/templates/bulk_action_menu.mustache
+++ b/mod/forum/report/summary/templates/bulk_action_menu.mustache
@@ -68,7 +68,7 @@
 <div class="d-inline-block w-100">
     {{#showbulkactions}}
     <div class="buttons float-left">
-        <div class="form-inline pl-1">
+        <div class="d-flex flex-wrap align-items-center pl-1">
             <label for="{{id}}">{{#str}}withselectedusers{{/str}}</label>
             <select id="{{id}}" class="select custom-select ml-4" {{#attributes}}{{name}}="{{value}}" {{/attributes}}>
                 <option value="">{{#str}}choosedots{{/str}}</option>
diff --git a/mod/forum/templates/big_search_form.mustache b/mod/forum/templates/big_search_form.mustache
index 34bb83bba31..838b8c2adfd 100644
--- a/mod/forum/templates/big_search_form.mustache
+++ b/mod/forum/templates/big_search_form.mustache
@@ -92,7 +92,7 @@
                 <td class="c0 text-xs-right align-bottom">
                     <label for="timefromrestrict">{{#str}}searchdatefrom, forum{{/str}}</label>
                 </td>
-                <td class="c1 text-nowrap form-inline">
+                <td class="c1 text-nowrap d-flex flex-wrap align-items-center">
                     <div class="fdate_time_selector d-flex flex-wrap align-items-center">
                         <input type="checkbox" name="timefromrestrict" value="1" {{#datefromchecked}}checked{{/datefromchecked}}>
                         {{{datefromfields}}}
@@ -108,7 +108,7 @@
                 <td class="c0 text-xs-right align-bottom">
                     <label for="timetorestrict">{{#str}}searchdateto, forum{{/str}}</label>
                 </td>
-                <td class="c1 text-nowrap form-inline">
+                <td class="c1 text-nowrap d-flex flex-wrap align-items-center">
                     <div class="fdate_time_selector d-flex flex-wrap align-items-center">
                         <input type="checkbox" name="timetorestrict" value="1" {{#datetochecked}}checked{{/datetochecked}}>
                         {{{datetofields}}}
@@ -153,7 +153,7 @@
                 <td class="c0 text-xs-right align-bottom">
                     <label for="starredonly">{{#str}}starredonly, forum{{/str}}</label>
                 </td>
-                <td class="c1 align-middle form-inline">
+                <td class="c1 align-middle d-flex flex-wrap align-items-center">
                     <input type="checkbox" class="form-control" name="starredonly" id="starredonly" value="1" {{#starredonly}}checked{{/starredonly}} />
                 </td>
             </tr>
diff --git a/mod/forum/templates/forum_discussion.mustache b/mod/forum/templates/forum_discussion.mustache
index fed8dcdf793..a2da26303fc 100644
--- a/mod/forum/templates/forum_discussion.mustache
+++ b/mod/forum/templates/forum_discussion.mustache
@@ -30,7 +30,7 @@
         "html": {
             "hasanyactions": true,
             "posts": "<article id='p33' class='forum-post-container mb-2' data-post-id='33'></article>",
-            "modeselectorform": "<div class='singleselect d-inline-block'> <form method='get' action='http://localhost/m/pg_stable_master/mod/forum/discuss.php' class='form-inline' id='mode'></div>",
+            "modeselectorform": "<div class='singleselect d-inline-block'> <form method='get' action='http://localhost/m/pg_stable_master/mod/forum/discuss.php' class='d-flex flex-wrap' id='mode'></div>",
             "subscribe": null,
             "movediscussion": null,
             "pindiscussion": null,
diff --git a/mod/forum/templates/forum_discussion_nested_v2.mustache b/mod/forum/templates/forum_discussion_nested_v2.mustache
index f69f5d651e5..82a39370acb 100644
--- a/mod/forum/templates/forum_discussion_nested_v2.mustache
+++ b/mod/forum/templates/forum_discussion_nested_v2.mustache
@@ -30,7 +30,7 @@
         "html": {
             "hasanyactions": true,
             "posts": "<article id='p33' class='forum-post-container mb-2' data-post-id='33'></article>",
-            "modeselectorform": "<div class='singleselect d-inline-block'> <form method='get' action='http://localhost/m/pg_stable_master/mod/forum/discuss.php' class='form-inline' id='mode'></div>",
+            "modeselectorform": "<div class='singleselect d-inline-block'> <form method='get' action='http://localhost/m/pg_stable_master/mod/forum/discuss.php' class='d-flex flex-wrap' id='mode'></div>",
             "subscribe": null,
             "movediscussion": null,
             "pindiscussion": null,
diff --git a/mod/glossary/editcategories.html b/mod/glossary/editcategories.html
index 924197063d5..757b0f4ddaa 100644
--- a/mod/glossary/editcategories.html
+++ b/mod/glossary/editcategories.html
@@ -10,7 +10,7 @@
                 <?php echo get_string("name") ?>
             </label>
         </div>
-        <div class="col-md-9 form-inline felement" data-fieldtype="select">
+        <div class="col-md-9 d-flex flex-wrap align-items-center felement" data-fieldtype="select">
             <input type="text" name="name" id="name" class="form-control" size="30" value="<?php p($name) ?>" />
         </div>
     </div>
@@ -23,7 +23,7 @@
                 <?php echo get_string("linkcategory","glossary") ?>
             </label>
         </div>
-        <div class="col-md-9 form-inline felement" data-fieldtype="select">
+        <div class="col-md-9 d-flex flex-wrap align-items-center felement" data-fieldtype="select">
             <select size="1" id="usedynalink" name="usedynalink" class="custom-select">
                 <option value="1" <?php
        if ( $usedynalink ) {
@@ -46,7 +46,7 @@
             <label class="col-form-label d-inline " for="fgroup_id_buttonar">
             </label>
         </div>
-        <div class="col-md-9 form-inline felement" data-fieldtype="group">
+        <div class="col-md-9 d-flex flex-wrap align-items-center felement" data-fieldtype="group">
             <div class="mb-3 fitem form-submit mr-1">
                 <label class="col-form-label" for="id_save">
                 </label>
diff --git a/mod/lti/templates/tool_configure.mustache b/mod/lti/templates/tool_configure.mustache
index bbe821e2151..0870d16af70 100644
--- a/mod/lti/templates/tool_configure.mustache
+++ b/mod/lti/templates/tool_configure.mustache
@@ -44,7 +44,7 @@
         <div id="registration-choice-container" class="centered-menu">
             <div class="card card-block">
                 <p class="lead">{{#str}} autoaddtype, mod_lti {{/str}}</p>
-                <form class="form-inline justify-content-center" id="add-tool-form">
+                <form class="d-flex flex-wrap align-items-center justify-content-center" id="add-tool-form">
                     <div class="control-group">
                         <input name="url"
                             class="form-control"
diff --git a/mod/quiz/classes/output/edit_renderer.php b/mod/quiz/classes/output/edit_renderer.php
index 8aea20137ac..92e76260c2f 100644
--- a/mod/quiz/classes/output/edit_renderer.php
+++ b/mod/quiz/classes/output/edit_renderer.php
@@ -181,7 +181,7 @@ class edit_renderer extends \plugin_renderer_base {
         $output = '';
         $output .= html_writer::start_div('maxgrade');
         $output .= html_writer::start_tag('form', ['method' => 'post', 'action' => 'edit.php',
-                'class' => 'quizsavegradesform form-inline']);
+                'class' => 'quizsavegradesform d-flex flex-wrap align-items-center']);
         $output .= html_writer::start_tag('fieldset', ['class' => 'invisiblefieldset']);
         $output .= html_writer::empty_tag('input', ['type' => 'hidden', 'name' => 'sesskey', 'value' => sesskey()]);
         $output .= html_writer::input_hidden_params($pageurl);
diff --git a/question/type/multianswer/renderer.php b/question/type/multianswer/renderer.php
index 57ab779e4ad..bb92e43c9ed 100644
--- a/question/type/multianswer/renderer.php
+++ b/question/type/multianswer/renderer.php
@@ -332,7 +332,7 @@ class qtype_multianswer_textfield_renderer extends qtype_multianswer_subq_render
                         $qa, 'question', 'answerfeedback', $matchinganswer->id),
                 s($correctanswer->answer), $options);
 
-        $output = html_writer::start_tag('span', array('class' => 'subquestion form-inline d-inline'));
+        $output = html_writer::start_tag('span', ['class' => 'subquestion d-flex flex-wrap align-items-center']);
 
         $output .= html_writer::tag('label', $this->get_answer_label(),
                 array('class' => 'subq accesshide', 'for' => $inputattributes['id']));
diff --git a/question/type/numerical/renderer.php b/question/type/numerical/renderer.php
index cedf1bf0a69..2a1b1cc0727 100644
--- a/question/type/numerical/renderer.php
+++ b/question/type/numerical/renderer.php
@@ -125,7 +125,7 @@ class qtype_numerical_renderer extends qtype_renderer {
         $result = html_writer::tag('div', $questiontext, array('class' => 'qtext'));
 
         if (!$placeholder) {
-            $result .= html_writer::start_tag('div', array('class' => 'ablock form-inline'));
+            $result .= html_writer::start_tag('div', ['class' => 'ablock d-flex flex-wrap align-items-center']);
             $label = $options->add_question_identifier_to_label(get_string('answercolon', 'qtype_numerical'), true);
             $result .= html_writer::tag('label', $label,
                 array('for' => $inputattributes['id']));
diff --git a/question/type/shortanswer/renderer.php b/question/type/shortanswer/renderer.php
index 8ca321e898a..f099aac0448 100644
--- a/question/type/shortanswer/renderer.php
+++ b/question/type/shortanswer/renderer.php
@@ -85,7 +85,7 @@ class qtype_shortanswer_renderer extends qtype_renderer {
         $result = html_writer::tag('div', $questiontext, array('class' => 'qtext'));
 
         if (!$placeholder) {
-            $result .= html_writer::start_tag('div', array('class' => 'ablock form-inline'));
+            $result .= html_writer::start_tag('div', ['class' => 'ablock d-flex flex-wrap align-items-center']);
             $answerspan = html_writer::tag('span', $input, array('class' => 'answer'));
             $label = $options->add_question_identifier_to_label(get_string('answercolon', 'qtype_numerical'), true);
             $result .= html_writer::tag('label', $label . $answerspan,
diff --git a/report/courseoverview/index.php b/report/courseoverview/index.php
index ba1b0a8f9f8..2acb8c4f6e2 100644
--- a/report/courseoverview/index.php
+++ b/report/courseoverview/index.php
@@ -70,7 +70,8 @@ if (empty($timeoptions)) {
     throw new \moodle_exception('nostatstodisplay', 'error', $CFG->wwwroot.'/course/view.php?id='.$course->id);
 }
 
-echo html_writer::start_tag('form', array('action' => 'index.php', 'method' => 'post', 'class' => 'form-inline'));
+echo html_writer::start_tag('form', ['action' => 'index.php', 'method' => 'post',
+    'class' => 'd-flex flex-wrap align-items-center']);
 echo html_writer::start_tag('div');
 
 $table = new html_table();
diff --git a/report/participation/locallib.php b/report/participation/locallib.php
index 7ef53b5fd2b..62687e867a6 100644
--- a/report/participation/locallib.php
+++ b/report/participation/locallib.php
@@ -217,7 +217,7 @@ function report_participation_print_filter_form($course, $timefrom, $minlog, $ac
         $instanceoptions[] = array(get_string('modulenameplural', $module->name)=>$instances);
     }
 
-    echo '<form class="participationselectform form-inline" action="index.php" method="get"><div>'."\n".
+    echo '<form class="participationselectform d-flex flex-wrap align-items-center" action="index.php" method="get"><div>'."\n".
         '<input type="hidden" name="id" value="'.$course->id.'" />'."\n";
     echo '<label for="menuinstanceid">'.get_string('activitymodule').'</label>'."\n";
     echo html_writer::select($instanceoptions, 'instanceid', $instanceid);
diff --git a/tag/templates/combine_tags.mustache b/tag/templates/combine_tags.mustache
index 5c6e6e87efb..4af555d7860 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="mb-3 options form-inline">
+    <div class="mb-3 options d-flex flex-wrap align-items-center">
         {{#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/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 0eac18a9b95..2017a5f3b8c 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -501,10 +501,6 @@
     padding-bottom: 13rem;
 }
 
-.jumpmenu .form-inline {
-    display: block;
-}
-
 .path-course-view .completionprogress {
     margin-left: 25px;
 }
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index b3344a3f684..57a91eb4c82 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -22,7 +22,7 @@
     margin-bottom: 4px;
 }
 
-.mform .form-inline {
+.mform .d-flex {
     .form-control,
     .custom-select {
         max-width: 100%;
@@ -40,11 +40,6 @@
     }
 }
 
-.unresponsive.mform .form-inline,
-.unresponsive.mform .form-inline label {
-    display: inline-flex;
-}
-
 #jump-to-activity.custom-select {
     width: 100%;
 }
@@ -91,14 +86,6 @@ input#id_externalurl {
     display: block;
 }
 
-.form-item .form-inline {
-    display: inline;
-}
-
-.form-inline label:not(.sr-only):not(.accesshide) + select {
-    margin-left: 0.5rem;
-}
-
 .formsettingheading .form-horizontal {
     color: $text-muted;
 }
@@ -400,20 +387,6 @@ textarea[data-auto-rows] {
     }
 }
 
-/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
-.form-inline {
-    @include media-breakpoint-up(md) {
-        .col-md-9,
-        .col-md-3 {
-            label {
-                margin-left: 1rem;
-            }
-            margin-bottom: 1rem;
-            width: auto;
-        }
-    }
-}
-
 [data-fieldtype="modgrade"] .fitem {
     padding-bottom: $input-padding-y;
 }
@@ -438,9 +411,9 @@ textarea[data-auto-rows] {
 }
 
 // The autocomplete popup needs a display:block container to correctly position to popup.
-.form-inline[data-fieldtype="autocomplete"],
-.form-inline[data-fieldtype="tags"] {
-    display: block;
+.felement[data-fieldtype="autocomplete"],
+.felement[data-fieldtype="tags"] {
+    display: block !important; /* stylelint-disable-line declaration-no-important */
 }
 
 // Show editor at 100% width by default.
@@ -454,18 +427,6 @@ textarea[data-auto-rows] {
     }
 }
 
-@include media-breakpoint-up(sm) {
-    .mform {
-        .form-inline {
-            .fdefaultcustom {
-                label {
-                    justify-content: initial;
-                }
-            }
-        }
-    }
-}
-
 .collapsemenu {
     .collapseall {
         display: block;
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index e7a36cdb04a..25f651b945e 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -245,15 +245,6 @@ select {
     }
 }
 
-#page-mod-forum-discuss .discussioncontrols {
-    width: auto;
-    margin: 0;
-
-    .form-inline input {
-        margin-top: -1px;
-    }
-}
-
 $author-image-width: 70px;
 $author-image-margin: 24px;
 $author-image-width-sm: 30px;
@@ -1020,9 +1011,6 @@ div#dock {
 .path-mod-lesson .answeroption .checkbox label p {
     display: inline;
 }
-.path-mod-lesson .form-inline label.form-check-label {
-    display: inline-block;
-}
 .path-mod-lesson .slideshow {
     overflow: auto;
     padding: 15px;
@@ -1219,10 +1207,6 @@ img.userpicture {
     line-height: 1.5;
     vertical-align: bottom;
 }
-#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
-    float: left;
-    clear: left;
-}
 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
     width: auto;
     height: 22px;
diff --git a/theme/boost/scss/moodle/search.scss b/theme/boost/scss/moodle/search.scss
index 74871285052..7dd9797cc94 100644
--- a/theme/boost/scss/moodle/search.scss
+++ b/theme/boost/scss/moodle/search.scss
@@ -67,7 +67,7 @@
     background-color: $white;
     z-index: $zindex-popover;
     height: $navbar-height;
-    .form-inline {
+    .searchform-navbar {
         width: auto;
         margin-left: auto;
         margin-right: auto;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 88415604dfe..01e0a9b0715 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -28312,10 +28312,6 @@ table.calendartable caption {
   padding-bottom: 13rem;
 }
 
-.jumpmenu .form-inline {
-  display: block;
-}
-
 .path-course-view .completionprogress {
   margin-left: 25px;
 }
@@ -32845,8 +32841,8 @@ body.path-question-type .mform fieldset.hidden {
   z-index: 1060;
   height: 60px;
 }
-.simplesearchform .collapse.show .form-inline,
-.simplesearchform .collapsing .form-inline {
+.simplesearchform .collapse.show .searchform-navbar,
+.simplesearchform .collapsing .searchform-navbar {
   width: auto;
   margin-left: auto;
   margin-right: auto;
@@ -32893,27 +32889,22 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 4px;
 }
 
-.mform .form-inline .form-control,
-.mform .form-inline .custom-select {
+.mform .d-flex .form-control,
+.mform .d-flex .custom-select {
   max-width: 100%;
 }
-.mform .form-inline textarea.form-control {
+.mform .d-flex textarea.form-control {
   width: 100%;
 }
-.mform .form-inline .fitem {
+.mform .d-flex .fitem {
   margin: 0.1rem 0.25rem 0.1rem 0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.mform .form-inline br + label {
+.mform .d-flex br + label {
   justify-content: flex-start;
   width: 100%;
   margin-right: 0;
 }
 
-.unresponsive.mform .form-inline,
-.unresponsive.mform .form-inline label {
-  display: inline-flex;
-}
-
 #jump-to-activity.custom-select {
   width: 100%;
 }
@@ -32961,14 +32952,6 @@ input#id_externalurl {
   display: block;
 }
 
-.form-item .form-inline {
-  display: inline;
-}
-
-.form-inline label:not(.sr-only):not(.accesshide) + select {
-  margin-left: 0.5rem;
-}
-
 .formsettingheading .form-horizontal {
   color: #6a737b;
 }
@@ -33248,19 +33231,6 @@ textarea[data-auto-rows] {
     margin-left: auto;
   }
 }
-/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
-@media (min-width: 768px) {
-  .form-inline .col-md-9,
-  .form-inline .col-md-3 {
-    margin-bottom: 1rem;
-    width: auto;
-  }
-  .form-inline .col-md-9 label,
-  .form-inline .col-md-3 label {
-    margin-left: 1rem;
-  }
-}
-
 [data-fieldtype=modgrade] .fitem {
   padding-bottom: 0.375rem;
 }
@@ -33280,9 +33250,9 @@ textarea[data-auto-rows] {
   display: none;
 }
 
-.form-inline[data-fieldtype=autocomplete],
-.form-inline[data-fieldtype=tags] {
-  display: block;
+.felement[data-fieldtype=autocomplete],
+.felement[data-fieldtype=tags] {
+  display: block !important; /* stylelint-disable-line declaration-no-important */
 }
 
 [data-fieldtype=editor] > div {
@@ -33294,11 +33264,6 @@ textarea[data-auto-rows] {
     padding-left: 2.5rem;
   }
 }
-@media (min-width: 576px) {
-  .mform .form-inline .fdefaultcustom label {
-    justify-content: initial;
-  }
-}
 .collapsemenu .collapseall {
   display: block;
 }
@@ -33585,14 +33550,6 @@ select {
   max-width: calc(100% - 35px - 0.5rem);
 }
 
-#page-mod-forum-discuss .discussioncontrols {
-  width: auto;
-  margin: 0;
-}
-#page-mod-forum-discuss .discussioncontrols .form-inline input {
-  margin-top: -1px;
-}
-
 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
 @keyframes background-highlight {
   from {
@@ -34227,10 +34184,6 @@ div#dock {
   display: inline;
 }
 
-.path-mod-lesson .form-inline label.form-check-label {
-  display: inline-block;
-}
-
 .path-mod-lesson .slideshow {
   overflow: auto;
   padding: 15px;
@@ -34405,11 +34358,6 @@ img.userpicture {
   vertical-align: bottom;
 }
 
-#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
-  float: left;
-  clear: left;
-}
-
 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
   width: auto;
   height: 22px;
diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt
index f327e12f29a..8fdaebbc143 100644
--- a/theme/boost/upgrade.txt
+++ b/theme/boost/upgrade.txt
@@ -6,6 +6,7 @@ information provided here is intended especially for theme designers.
 * 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´, ...).
+* Bootstrap `.form-inline` helper class is no longer used, use display utilities instead (`.d-flex.flex-wrap.align-items-center`).
 
 === 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 54eb041a062..d35d63ce66a 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -28312,10 +28312,6 @@ table.calendartable caption {
   padding-bottom: 13rem;
 }
 
-.jumpmenu .form-inline {
-  display: block;
-}
-
 .path-course-view .completionprogress {
   margin-left: 25px;
 }
@@ -32845,8 +32841,8 @@ body.path-question-type .mform fieldset.hidden {
   z-index: 1060;
   height: 50px;
 }
-.simplesearchform .collapse.show .form-inline,
-.simplesearchform .collapsing .form-inline {
+.simplesearchform .collapse.show .searchform-navbar,
+.simplesearchform .collapsing .searchform-navbar {
   width: auto;
   margin-left: auto;
   margin-right: auto;
@@ -32893,27 +32889,22 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 4px;
 }
 
-.mform .form-inline .form-control,
-.mform .form-inline .custom-select {
+.mform .d-flex .form-control,
+.mform .d-flex .custom-select {
   max-width: 100%;
 }
-.mform .form-inline textarea.form-control {
+.mform .d-flex textarea.form-control {
   width: 100%;
 }
-.mform .form-inline .fitem {
+.mform .d-flex .fitem {
   margin: 0.1rem 0.25rem 0.1rem 0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.mform .form-inline br + label {
+.mform .d-flex br + label {
   justify-content: flex-start;
   width: 100%;
   margin-right: 0;
 }
 
-.unresponsive.mform .form-inline,
-.unresponsive.mform .form-inline label {
-  display: inline-flex;
-}
-
 #jump-to-activity.custom-select {
   width: 100%;
 }
@@ -32961,14 +32952,6 @@ input#id_externalurl {
   display: block;
 }
 
-.form-item .form-inline {
-  display: inline;
-}
-
-.form-inline label:not(.sr-only):not(.accesshide) + select {
-  margin-left: 0.5rem;
-}
-
 .formsettingheading .form-horizontal {
   color: #6a737b;
 }
@@ -33248,19 +33231,6 @@ textarea[data-auto-rows] {
     margin-left: auto;
   }
 }
-/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
-@media (min-width: 768px) {
-  .form-inline .col-md-9,
-  .form-inline .col-md-3 {
-    margin-bottom: 1rem;
-    width: auto;
-  }
-  .form-inline .col-md-9 label,
-  .form-inline .col-md-3 label {
-    margin-left: 1rem;
-  }
-}
-
 [data-fieldtype=modgrade] .fitem {
   padding-bottom: 0.375rem;
 }
@@ -33280,9 +33250,9 @@ textarea[data-auto-rows] {
   display: none;
 }
 
-.form-inline[data-fieldtype=autocomplete],
-.form-inline[data-fieldtype=tags] {
-  display: block;
+.felement[data-fieldtype=autocomplete],
+.felement[data-fieldtype=tags] {
+  display: block !important; /* stylelint-disable-line declaration-no-important */
 }
 
 [data-fieldtype=editor] > div {
@@ -33294,11 +33264,6 @@ textarea[data-auto-rows] {
     padding-left: 2.5rem;
   }
 }
-@media (min-width: 576px) {
-  .mform .form-inline .fdefaultcustom label {
-    justify-content: initial;
-  }
-}
 .collapsemenu .collapseall {
   display: block;
 }
@@ -33585,14 +33550,6 @@ select {
   max-width: calc(100% - 35px - 0.5rem);
 }
 
-#page-mod-forum-discuss .discussioncontrols {
-  width: auto;
-  margin: 0;
-}
-#page-mod-forum-discuss .discussioncontrols .form-inline input {
-  margin-top: -1px;
-}
-
 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
 @keyframes background-highlight {
   from {
@@ -34227,10 +34184,6 @@ div#dock {
   display: inline;
 }
 
-.path-mod-lesson .form-inline label.form-check-label {
-  display: inline-block;
-}
-
 .path-mod-lesson .slideshow {
   overflow: auto;
   padding: 15px;
@@ -34405,11 +34358,6 @@ img.userpicture {
   vertical-align: bottom;
 }
 
-#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
-  float: left;
-  clear: left;
-}
-
 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
   width: auto;
   height: 22px;
diff --git a/user/index.php b/user/index.php
index d75a4f39d3c..052cfc3a24e 100644
--- a/user/index.php
+++ b/user/index.php
@@ -205,7 +205,7 @@ $bulkoptions = (object) [
     'uniqueid' => $participanttable->uniqueid,
 ];
 
-echo '<br /><div class="buttons"><div class="form-inline">';
+echo '<br /><div class="buttons"><div class="d-flex flex-wrap align-items-center">';
 
 echo html_writer::start_tag('div', array('class' => 'btn-group'));
 
diff --git a/user/selector/lib.php b/user/selector/lib.php
index bce59893967..0663b19256a 100644
--- a/user/selector/lib.php
+++ b/user/selector/lib.php
@@ -268,7 +268,7 @@ abstract class user_selector_base {
         $output .= $this->output_options($groupedusers, $search);
 
         // Output the search controls.
-        $output .= "</select>\n<div class=\"form-inline\">\n";
+        $output .= "</select>\n<div class=\"d-flex flex-wrap align-items-center\">\n";
         $output .= '<input type="text" name="' . $this->name . '_searchtext" id="' .
                 $this->name . '_searchtext" size="15" value="' . s($search) . '" class="form-control"/>';
         $output .= '<input type="submit" name="' . $this->name . '_searchbutton" id="' .