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 41d64eaa38179..488554845071d 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
@@ -25,9 +25,10 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = M.util.get_string('title', 'availability_completion') + ' <span class="availability-group"><label>' +
+    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+               ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
-            '<select name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
+            '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.cms.length; i++) {
         var cm = this.cms[i];
@@ -36,13 +37,14 @@ M.availability_completion.form.getNode = function(json) {
     }
     html += '</select></label> <label><span class="accesshide">' +
                 M.util.get_string('label_completion', 'availability_completion') +
-            ' </span><select name="e" title="' + 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>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 e780555c04a34..36efbb5161a4c 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(e,t){M.availability_completion=M.availability_completion||{},M.availability_completion.form=e.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(t){var n=M.util.get_string("title","availability_completion")+' <span class="availability-group"><label>'+'<span class="accesshide">'+M.util.get_string("label_cm","availability_completion")+" </span>"+'<select name="cm" title="'+M.util.get_string("label_cm","availability_completion")+'">'+'<option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.cms.length;r++){var i=this.cms[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_completion","availability_completion")+' </span><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>";var s=e.Node.create("<span>"+n+"</span>");t.cm!==undefined&&s.one("select[name=cm] > option[value="+t.cm+"]")&&s.one("select[name=cm]").set("value",""+t.cm),t.e!==undefined&&s.one("select[name=e]").set("value",""+t.e);if(!M.availability_completion.form.addedEvents){M.availability_completion.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_completion select")}return s},M.availability_completion.form.fillValue=function(e,t){e.cm=parseInt(t.one("select[name=cm]").get("value"),10),e.e=parseInt(t.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(e,t){var n=parseInt(t.one("select[name=cm]").get("value"),10);n===0&&e.push("availability_completion:error_selectcmid")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
+YUI.add("moodle-availability_completion-form",function(e,t){M.availability_completion=M.availability_completion||{},M.availability_completion.form=e.Object(M.core_availability.plugin),M.availability_completion.form.initInner=function(e){this.cms=e},M.availability_completion.form.getNode=function(t){var n='<span class="col-form-label p-r-1"> '+M.util.get_string("title","availability_completion")+"</span>"+' <span class="availability-group form-group"><label>'+'<span class="accesshide">'+M.util.get_string("label_cm","availability_completion")+" </span>"+'<select class="custom-select" name="cm" title="'+M.util.get_string("label_cm","availability_completion")+'">'+'<option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.cms.length;r++){var i=this.cms[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+='</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>";var s=e.Node.create('<span class="form-inline">'+n+"</span>");t.cm!==undefined&&s.one("select[name=cm] > option[value="+t.cm+"]")&&s.one("select[name=cm]").set("value",""+t.cm),t.e!==undefined&&s.one("select[name=e]").set("value",""+t.e);if(!M.availability_completion.form.addedEvents){M.availability_completion.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_completion select")}return s},M.availability_completion.form.fillValue=function(e,t){e.cm=parseInt(t.one("select[name=cm]").get("value"),10),e.e=parseInt(t.one("select[name=e]").get("value"),10)},M.availability_completion.form.fillErrors=function(e,t){var n=parseInt(t.one("select[name=cm]").get("value"),10);n===0&&e.push("availability_completion:error_selectcmid")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
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 41d64eaa38179..488554845071d 100644
--- a/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
+++ b/availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
@@ -25,9 +25,10 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = M.util.get_string('title', 'availability_completion') + ' <span class="availability-group"><label>' +
+    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+               ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
-            '<select name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
+            '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.cms.length; i++) {
         var cm = this.cms[i];
@@ -36,13 +37,14 @@ M.availability_completion.form.getNode = function(json) {
     }
     html += '</select></label> <label><span class="accesshide">' +
                 M.util.get_string('label_completion', 'availability_completion') +
-            ' </span><select name="e" title="' + 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>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 89b1058e2b5da..e7b418ebfa495 100644
--- a/availability/condition/completion/yui/src/form/js/form.js
+++ b/availability/condition/completion/yui/src/form/js/form.js
@@ -23,9 +23,10 @@ M.availability_completion.form.initInner = function(cms) {
 
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
-    var html = M.util.get_string('title', 'availability_completion') + ' <span class="availability-group"><label>' +
+    var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
+               ' <span class="availability-group form-group"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
-            '<select name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
+            '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.cms.length; i++) {
         var cm = this.cms[i];
@@ -34,13 +35,14 @@ M.availability_completion.form.getNode = function(json) {
     }
     html += '</select></label> <label><span class="accesshide">' +
                 M.util.get_string('label_completion', 'availability_completion') +
-            ' </span><select name="e" title="' + 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>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&
diff --git a/availability/condition/date/classes/frontend.php b/availability/condition/date/classes/frontend.php
index 3af417202e6cf..abca3e6446b07 100644
--- a/availability/condition/date/classes/frontend.php
+++ b/availability/condition/date/classes/frontend.php
@@ -151,7 +151,7 @@ protected function get_javascript_init_params($course, \cm_info $cm = null,
             // NOTE: The fields need to have these weird names in order that they
             // match the standard Moodle form control, otherwise the date selector
             // won't find them.
-            $html .= \html_writer::start_tag('select', array('name' => 'x[' . $field . ']'));
+            $html .= \html_writer::start_tag('select', array('name' => 'x[' . $field . ']', 'class' => 'custom-select'));
             foreach ($options as $key => $value) {
                 $params = array('value' => $key);
                 if ($current[$field] == $key) {
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
index 7530a28bf2ba5..71cc687cc3f83 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-debug.js
@@ -29,9 +29,10 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = M.util.get_string('direction_before', 'availability_date') + ' <span class="availability-group">' +
+    var html = '<span class="col-form-label p-r-1">' +
+                    M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
-            '<select name="direction">' +
+            '<select name="direction" class="custom-select">' +
             '<option value="&gt;=">' + M.util.get_string('direction_from', 'availability_date') + '</option>' +
             '<option value="&lt;">' + M.util.get_string('direction_until', 'availability_date') + '</option>' +
             '</select></label></span> ' + this.html;
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
index 8a9bd5d3142ec..6a9564d040156 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-availability_date-form",function(e,t){M.availability_date=M.availability_date||{},M.availability_date.form=e.Object(M.core_availability.plugin),M.availability_date.form.initInner=function(e,t){this.html=e,this.defaultTime=t},M.availability_date.form.getNode=function(t){var n=M.util.get_string("direction_before","availability_date")+' <span class="availability-group">'+'<label><span class="accesshide">'+M.util.get_string("direction_label","availability_date")+" </span>"+'<select name="direction">'+'<option value="&gt;=">'+M.util.get_string("direction_from","availability_date")+"</option>"+'<option value="&lt;">'+M.util.get_string("direction_until","availability_date")+"</option>"+"</select></label></span> "+this.html,r=e.Node.create("<span>"+n+"</span>");if(t.t!==undefined){r.setData("time",t.t),r.all("select:not([name=direction])").each(function(e){e.set("disabled",!0)});var i=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=fromtime"+"&time="+t.t;e.io(i,{on:{success:function(t,n){var i=e.JSON.parse(n.responseText);for(var s in i){var o=r.one("select[name=x\\["+s+"\\]]");o.set("value",""+i[s]),o.set("disabled",!1)}},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})}else r.setData("time",this.defaultTime);t.d!==undefined&&r.one("select[name=direction]").set("value",t.d);if(!M.availability_date.form.addedEvents){M.availability_date.form.addedEvents=!0;var s=e.one(".availability-field");s.delegate("change",function(){M.core_availability.form.update()},".availability_date select[name=direction]"),s.delegate("change",function(){M.availability_date.form.updateTime(this.ancestor("span.availability_date"))},".availability_date select:not([name=direction])")}if(r.one("a[href=#]")){M.form.dateselector.init_single_date_selector(r);var o=r.one("select[name=x\\[year\\]]"),u=o.set;o.set=function(e,t){u.call(o,e,t),e==="selectedIndex"&&setTimeout(function(){M.availability_date.form.updateTime(r)},0)}}return r},M.availability_date.form.updateTime=function(t){var n=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=totime"+"&year="+t.one("select[name=x\\[year\\]]").get("value")+"&month="+t.one("select[name=x\\[month\\]]").get("value")+"&day="+t.one("select[name=x\\[day\\]]").get("value")+"&hour="+t.one("select[name=x\\[hour\\]]").get("value")+"&minute="+t.one("select[name=x\\[minute\\]]").get("value");e.io(n,{on:{success:function(e,n){t.setData("time",n.responseText),M.core_availability.form.update()},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})},M.availability_date.form.fillValue=function(e,t){e.d=t.one("select[name=direction]").get("value"),e.t=parseInt(t.getData("time"),10)}},"@VERSION@",{requires:["base","node","event","io","moodle-core_availability-form"]});
+YUI.add("moodle-availability_date-form",function(e,t){M.availability_date=M.availability_date||{},M.availability_date.form=e.Object(M.core_availability.plugin),M.availability_date.form.initInner=function(e,t){this.html=e,this.defaultTime=t},M.availability_date.form.getNode=function(t){var n='<span class="col-form-label p-r-1">'+M.util.get_string("direction_before","availability_date")+'</span> <span class="availability-group">'+'<label><span class="accesshide">'+M.util.get_string("direction_label","availability_date")+" </span>"+'<select name="direction" class="custom-select">'+'<option value="&gt;=">'+M.util.get_string("direction_from","availability_date")+"</option>"+'<option value="&lt;">'+M.util.get_string("direction_until","availability_date")+"</option>"+"</select></label></span> "+this.html,r=e.Node.create("<span>"+n+"</span>");if(t.t!==undefined){r.setData("time",t.t),r.all("select:not([name=direction])").each(function(e){e.set("disabled",!0)});var i=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=fromtime"+"&time="+t.t;e.io(i,{on:{success:function(t,n){var i=e.JSON.parse(n.responseText);for(var s in i){var o=r.one("select[name=x\\["+s+"\\]]");o.set("value",""+i[s]),o.set("disabled",!1)}},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})}else r.setData("time",this.defaultTime);t.d!==undefined&&r.one("select[name=direction]").set("value",t.d);if(!M.availability_date.form.addedEvents){M.availability_date.form.addedEvents=!0;var s=e.one(".availability-field");s.delegate("change",function(){M.core_availability.form.update()},".availability_date select[name=direction]"),s.delegate("change",function(){M.availability_date.form.updateTime(this.ancestor("span.availability_date"))},".availability_date select:not([name=direction])")}if(r.one("a[href=#]")){M.form.dateselector.init_single_date_selector(r);var o=r.one("select[name=x\\[year\\]]"),u=o.set;o.set=function(e,t){u.call(o,e,t),e==="selectedIndex"&&setTimeout(function(){M.availability_date.form.updateTime(r)},0)}}return r},M.availability_date.form.updateTime=function(t){var n=M.cfg.wwwroot+"/availability/condition/date/ajax.php?action=totime"+"&year="+t.one("select[name=x\\[year\\]]").get("value")+"&month="+t.one("select[name=x\\[month\\]]").get("value")+"&day="+t.one("select[name=x\\[day\\]]").get("value")+"&hour="+t.one("select[name=x\\[hour\\]]").get("value")+"&minute="+t.one("select[name=x\\[minute\\]]").get("value");e.io(n,{on:{success:function(e,n){t.setData("time",n.responseText),M.core_availability.form.update()},failure:function(){window.alert(M.util.get_string("ajaxerror","availability_date"))}}})},M.availability_date.form.fillValue=function(e,t){e.d=t.one("select[name=direction]").get("value"),e.t=parseInt(t.getData("time"),10)}},"@VERSION@",{requires:["base","node","event","io","moodle-core_availability-form"]});
diff --git a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
index 7530a28bf2ba5..71cc687cc3f83 100644
--- a/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
+++ b/availability/condition/date/yui/build/moodle-availability_date-form/moodle-availability_date-form.js
@@ -29,9 +29,10 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = M.util.get_string('direction_before', 'availability_date') + ' <span class="availability-group">' +
+    var html = '<span class="col-form-label p-r-1">' +
+                    M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
-            '<select name="direction">' +
+            '<select name="direction" class="custom-select">' +
             '<option value="&gt;=">' + M.util.get_string('direction_from', 'availability_date') + '</option>' +
             '<option value="&lt;">' + M.util.get_string('direction_until', 'availability_date') + '</option>' +
             '</select></label></span> ' + this.html;
diff --git a/availability/condition/date/yui/src/form/js/form.js b/availability/condition/date/yui/src/form/js/form.js
index e1ee836d22556..30e36fec2fa5c 100644
--- a/availability/condition/date/yui/src/form/js/form.js
+++ b/availability/condition/date/yui/src/form/js/form.js
@@ -27,9 +27,10 @@ M.availability_date.form.initInner = function(html, defaultTime) {
 };
 
 M.availability_date.form.getNode = function(json) {
-    var html = M.util.get_string('direction_before', 'availability_date') + ' <span class="availability-group">' +
+    var html = '<span class="col-form-label p-r-1">' +
+                    M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
             '<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
-            '<select name="direction">' +
+            '<select name="direction" class="custom-select">' +
             '<option value="&gt;=">' + M.util.get_string('direction_from', 'availability_date') + '</option>' +
             '<option value="&lt;">' + M.util.get_string('direction_until', 'availability_date') + '</option>' +
             '</select></label></span> ' + this.html;
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 734994e22a565..adb9f363f9af4 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
@@ -37,24 +37,27 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grade') + ' <span class="availability-group">' +
-            '<select name="id"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
+    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <span class="availability-group">' +
-            '<label><input type="checkbox" name="min"/>' + M.util.get_string('option_min', 'availability_grade') +
+    html += '</select></span></label> <br><span class="availability-group form-group">' +
+            '<label><input type="checkbox" class="form-check-input m-x-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" name="minval" title="' +
-            M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span>' +
-            '<span class="availability-group">' +
-            '<label><input type="checkbox" name="max"/>' + M.util.get_string('option_max', 'availability_grade') +
+            '</span><input type="text" class="form-control m-x-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 m-x-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" name="maxval" title="' +
+            '</span><input type="text" class="form-control m-x-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<div class="d-inline-block form-inline">' + 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 4d4a50c63bf53..6df65543c2a11 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(e,t){M.availability_grade=M.availability_grade||{},M.availability_grade.form=e.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(e){this.grades=e,this.nodesSoFar=0},M.availability_grade.form.getNode=function(t){this.nodesSoFar++;var n="<label>"+M.util.get_string("title","availability_grade")+' <span class="availability-group">'+'<select name="id"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.grades.length;r++){var i=this.grades[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+='</select></span></label> <span class="availability-group"><label><input type="checkbox" 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" name="minval" title="'+M.util.get_string("label_min","availability_grade")+'"/></label>%</span>'+'<span class="availability-group">'+'<label><input type="checkbox" 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" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>';var s=e.Node.create("<span>"+n+"</span>");t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")&&s.one("select[name=id]").set("value",""+t.id),t.min!==undefined&&(s.one("input[name=min]").set("checked",!0),s.one("input[name=minval]").set("value",t.min)),t.max!==undefined&&(s.one("input[name=max]").set("checked",!0),s.one("input[name=maxval]").set("value",t.max));var o=function(e,t){var n=e.ancestor("label").next("label").one("input"),r=e.get("checked");return n.set("disabled",!r),t&&r&&n.focus(),r};s.all("input[type=checkbox]").each(o);if(!M.availability_grade.form.addedEvents){M.availability_grade.form.addedEvents=!0;var u=e.one(".availability-field");u.delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),u.delegate("click",function(){o(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),u.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")}return s},M.availability_grade.form.fillValue=function(e,t){e.id=parseInt(t.one("select[name=id]").get("value"),10),t.one("input[name=min]").get("checked")&&(e.min=this.getValue("minval",t)),t.one("input[name=max]").get("checked")&&(e.max=this.getValue("maxval",t))},M.availability_grade.form.getValue=function(e,t){var n=t.one("input[name="+e+"]").get("value");if(!/^[0-9]+([.,][0-9]+)?$/.test(n))return n;var r=parseFloat(n.replace(",","."));return r<0||r>100?n:r},M.availability_grade.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id===0&&e.push("availability_grade:error_selectgradeid"),n.min!==undefined&&typeof n.min=="string"||n.max!==undefined&&typeof n.max=="string"?e.push("availability_grade:error_invalidnumber"):n.min!==undefined&&n.max!==undefined&&n.min>=n.max&&e.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
+YUI.add("moodle-availability_grade-form",function(e,t){M.availability_grade=M.availability_grade||{},M.availability_grade.form=e.Object(M.core_availability.plugin),M.availability_grade.form.grades=null,M.availability_grade.form.initInner=function(e){this.grades=e,this.nodesSoFar=0},M.availability_grade.form.getNode=function(t){this.nodesSoFar++;var n='<label class="form-group"><span class="p-r-1">'+M.util.get_string("title","availability_grade")+"</span> "+'<span class="availability-group">'+'<select name="id" class="custom-select"><option value="0">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.grades.length;r++){var i=this.grades[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+='</select></span></label> <br><span class="availability-group form-group"><label><input type="checkbox" class="form-check-input m-x-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 m-x-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 m-x-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 m-x-1" name="maxval" title="'+M.util.get_string("label_max","availability_grade")+'"/></label>%</span>';var s=e.Node.create('<div class="d-inline-block form-inline">'+n+"</div>");t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")&&s.one("select[name=id]").set("value",""+t.id),t.min!==undefined&&(s.one("input[name=min]").set("checked",!0),s.one("input[name=minval]").set("value",t.min)),t.max!==undefined&&(s.one("input[name=max]").set("checked",!0),s.one("input[name=maxval]").set("value",t.max));var o=function(e,t){var n=e.ancestor("label").next("label").one("input"),r=e.get("checked");return n.set("disabled",!r),t&&r&&n.focus(),r};s.all("input[type=checkbox]").each(o);if(!M.availability_grade.form.addedEvents){M.availability_grade.form.addedEvents=!0;var u=e.one(".availability-field");u.delegate("change",function(){M.core_availability.form.update()},".availability_grade select[name=id]"),u.delegate("click",function(){o(this,!0),M.core_availability.form.update()},".availability_grade input[type=checkbox]"),u.delegate("valuechange",function(){M.core_availability.form.update()},".availability_grade input[type=text]")}return s},M.availability_grade.form.fillValue=function(e,t){e.id=parseInt(t.one("select[name=id]").get("value"),10),t.one("input[name=min]").get("checked")&&(e.min=this.getValue("minval",t)),t.one("input[name=max]").get("checked")&&(e.max=this.getValue("maxval",t))},M.availability_grade.form.getValue=function(e,t){var n=t.one("input[name="+e+"]").get("value");if(!/^[0-9]+([.,][0-9]+)?$/.test(n))return n;var r=parseFloat(n.replace(",","."));return r<0||r>100?n:r},M.availability_grade.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id===0&&e.push("availability_grade:error_selectgradeid"),n.min!==undefined&&typeof n.min=="string"||n.max!==undefined&&typeof n.max=="string"?e.push("availability_grade:error_invalidnumber"):n.min!==undefined&&n.max!==undefined&&n.min>=n.max&&e.push("availability_grade:error_backwardrange")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
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 734994e22a565..adb9f363f9af4 100644
--- a/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
+++ b/availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
@@ -37,24 +37,27 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grade') + ' <span class="availability-group">' +
-            '<select name="id"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
+    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <span class="availability-group">' +
-            '<label><input type="checkbox" name="min"/>' + M.util.get_string('option_min', 'availability_grade') +
+    html += '</select></span></label> <br><span class="availability-group form-group">' +
+            '<label><input type="checkbox" class="form-check-input m-x-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" name="minval" title="' +
-            M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span>' +
-            '<span class="availability-group">' +
-            '<label><input type="checkbox" name="max"/>' + M.util.get_string('option_max', 'availability_grade') +
+            '</span><input type="text" class="form-control m-x-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 m-x-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" name="maxval" title="' +
+            '</span><input type="text" class="form-control m-x-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<div class="d-inline-block form-inline">' + 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 0286eb7a57f8d..776967969f88b 100644
--- a/availability/condition/grade/yui/src/form/js/form.js
+++ b/availability/condition/grade/yui/src/form/js/form.js
@@ -35,24 +35,27 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grade') + ' <span class="availability-group">' +
-            '<select name="id"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
+    var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <span class="availability-group">' +
-            '<label><input type="checkbox" name="min"/>' + M.util.get_string('option_min', 'availability_grade') +
+    html += '</select></span></label> <br><span class="availability-group form-group">' +
+            '<label><input type="checkbox" class="form-check-input m-x-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" name="minval" title="' +
-            M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span>' +
-            '<span class="availability-group">' +
-            '<label><input type="checkbox" name="max"/>' + M.util.get_string('option_max', 'availability_grade') +
+            '</span><input type="text" class="form-control m-x-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 m-x-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" name="maxval" title="' +
+            '</span><input type="text" class="form-control m-x-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<div class="d-inline-block form-inline">' + 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 9ddaa66391879..e6272f908f0fb 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form-debug.js
@@ -33,8 +33,9 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_group') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
             '<option value="any">' + M.util.get_string('anygroup', 'availability_group') + '</option>';
     for (var i = 0; i < this.groups.length; i++) {
@@ -43,7 +44,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
 
     // Set initial values (leave default 'choose' if creating afresh).
     if (json.creating === undefined) {
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 040d3951568fe..52658fee62e80 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(e,t){M.availability_group=M.availability_group||{},M.availability_group.form=e.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(e){this.groups=e},M.availability_group.form.getNode=function(t){var n="<label>"+M.util.get_string("title","availability_group")+' <span class="availability-group">'+'<select name="id">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>"+'<option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>";for(var r=0;r<this.groups.length;r++){var i=this.groups[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+="</select></span></label>";var s=e.Node.create("<span>"+n+"</span>");t.creating===undefined&&(t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")?s.one("select[name=id]").set("value",""+t.id):t.id===undefined&&s.one("select[name=id]").set("value","any"));if(!M.availability_group.form.addedEvents){M.availability_group.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_group select")}return s},M.availability_group.form.fillValue=function(e,t){var n=t.one("select[name=id]").get("value");n==="choose"?e.id="choose":n!=="any"&&(e.id=parseInt(n,10))},M.availability_group.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id&&n.id==="choose"&&e.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
+YUI.add("moodle-availability_group-form",function(e,t){M.availability_group=M.availability_group||{},M.availability_group.form=e.Object(M.core_availability.plugin),M.availability_group.form.groups=null,M.availability_group.form.initInner=function(e){this.groups=e},M.availability_group.form.getNode=function(t){var n='<label><span class="p-r-1">'+M.util.get_string("title","availability_group")+"</span> "+'<span class="availability-group">'+'<select name="id" class="custom-select">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>"+'<option value="any">'+M.util.get_string("anygroup","availability_group")+"</option>";for(var r=0;r<this.groups.length;r++){var i=this.groups[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+="</select></span></label>";var s=e.Node.create('<span class="form-inline">'+n+"</span>");t.creating===undefined&&(t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")?s.one("select[name=id]").set("value",""+t.id):t.id===undefined&&s.one("select[name=id]").set("value","any"));if(!M.availability_group.form.addedEvents){M.availability_group.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_group select")}return s},M.availability_group.form.fillValue=function(e,t){var n=t.one("select[name=id]").get("value");n==="choose"?e.id="choose":n!=="any"&&(e.id=parseInt(n,10))},M.availability_group.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id&&n.id==="choose"&&e.push("availability_group:error_selectgroup")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
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 9ddaa66391879..e6272f908f0fb 100644
--- a/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
+++ b/availability/condition/group/yui/build/moodle-availability_group-form/moodle-availability_group-form.js
@@ -33,8 +33,9 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_group') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
             '<option value="any">' + M.util.get_string('anygroup', 'availability_group') + '</option>';
     for (var i = 0; i < this.groups.length; i++) {
@@ -43,7 +44,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
 
     // Set initial values (leave default 'choose' if creating afresh).
     if (json.creating === undefined) {
diff --git a/availability/condition/group/yui/src/form/js/form.js b/availability/condition/group/yui/src/form/js/form.js
index 84eaa3391b10b..6c253614a5ad5 100644
--- a/availability/condition/group/yui/src/form/js/form.js
+++ b/availability/condition/group/yui/src/form/js/form.js
@@ -31,8 +31,9 @@ M.availability_group.form.initInner = function(groups) {
 
 M.availability_group.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_group') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
             '<option value="any">' + M.util.get_string('anygroup', 'availability_group') + '</option>';
     for (var i = 0; i < this.groups.length; i++) {
@@ -41,7 +42,7 @@ M.availability_group.form.getNode = function(json) {
         html += '<option value="' + group.id + '">' + group.name + '</option>';
     }
     html += '</select></span></label>';
-    var node = Y.Node.create('<span>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
 
     // Set initial values (leave default 'choose' if creating afresh).
     if (json.creating === undefined) {
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 c60c6816e5108..6dd1a72de3048 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form-debug.js
@@ -33,8 +33,9 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grouping') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.groupings.length; i++) {
         var grouping = this.groupings[i];
@@ -42,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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 5f1bcbc4abc8c..ebd80d80eda70 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(e,t){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=e.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(e){this.groupings=e},M.availability_grouping.form.getNode=function(t){var n="<label>"+M.util.get_string("title","availability_grouping")+' <span class="availability-group">'+'<select name="id">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.groupings.length;r++){var i=this.groupings[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+="</select></span></label>";var s=e.Node.create("<span>"+n+"</span>");t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")&&s.one("select[name=id]").set("value",""+t.id);if(!M.availability_grouping.form.addedEvents){M.availability_grouping.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")}return s},M.availability_grouping.form.fillValue=function(e,t){var n=t.one("select[name=id]").get("value");n==="choose"?e.id="choose":e.id=parseInt(n,10)},M.availability_grouping.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id==="choose"&&e.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
+YUI.add("moodle-availability_grouping-form",function(e,t){M.availability_grouping=M.availability_grouping||{},M.availability_grouping.form=e.Object(M.core_availability.plugin),M.availability_grouping.form.groupings=null,M.availability_grouping.form.initInner=function(e){this.groupings=e},M.availability_grouping.form.getNode=function(t){var n='<label><span class="p-r-1">'+M.util.get_string("title","availability_grouping")+"</span> "+'<span class="availability-group">'+'<select name="id" class="custom-select">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>";for(var r=0;r<this.groupings.length;r++){var i=this.groupings[r];n+='<option value="'+i.id+'">'+i.name+"</option>"}n+="</select></span></label>";var s=e.Node.create('<span class="form-inline">'+n+"</span>");t.id!==undefined&&s.one("select[name=id] > option[value="+t.id+"]")&&s.one("select[name=id]").set("value",""+t.id);if(!M.availability_grouping.form.addedEvents){M.availability_grouping.form.addedEvents=!0;var o=e.one(".availability-field");o.delegate("change",function(){M.core_availability.form.update()},".availability_grouping select")}return s},M.availability_grouping.form.fillValue=function(e,t){var n=t.one("select[name=id]").get("value");n==="choose"?e.id="choose":e.id=parseInt(n,10)},M.availability_grouping.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.id==="choose"&&e.push("availability_grouping:error_selectgrouping")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
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 c60c6816e5108..6dd1a72de3048 100644
--- a/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
+++ b/availability/condition/grouping/yui/build/moodle-availability_grouping-form/moodle-availability_grouping-form.js
@@ -33,8 +33,9 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grouping') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.groupings.length; i++) {
         var grouping = this.groupings[i];
@@ -42,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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 ad3135e3aaec3..41523859efdd4 100644
--- a/availability/condition/grouping/yui/src/form/js/form.js
+++ b/availability/condition/grouping/yui/src/form/js/form.js
@@ -31,8 +31,9 @@ M.availability_grouping.form.initInner = function(groupings) {
 
 M.availability_grouping.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<label>' + M.util.get_string('title', 'availability_grouping') + ' <span class="availability-group">' +
-            '<select name="id">' +
+    var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_grouping') + '</span> ' +
+            '<span class="availability-group">' +
+            '<select name="id" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.groupings.length; i++) {
         var grouping = this.groupings[i];
@@ -40,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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 9909ea2364909..f47ec110a2bfa 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form-debug.js
@@ -35,8 +35,9 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label>' + M.util.get_string('conditiontitle', 'availability_profile') + ' ' +
-            '<select name="field">' +
+    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+            M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
+            '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     var fieldInfo;
     for (var i = 0; i < this.standardFields.length; i++) {
@@ -50,7 +51,8 @@ M.availability_profile.form.getNode = function(json) {
         html += '<option value="cf_' + fieldInfo.field + '">' + fieldInfo.display + '</option>';
     }
     html += '</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') + '">';
+            ' </span><select name="op" title="' + M.util.get_string('label_operator', 'availability_profile') + '"' +
+                     ' class="custom-select">';
     var operators = ['isequalto', 'contains', 'doesnotcontain', 'startswith', 'endswith',
             'isempty', 'isnotempty'];
     for (i = 0; i < operators.length; i++) {
@@ -58,9 +60,9 @@ M.availability_profile.form.getNode = function(json) {
                 M.util.get_string('op_' + operators[i], 'availability_profile') + '</option>';
     }
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
-            '</span><input name="value" type="text" style="width: 10em" title="' +
+            '</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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 303b419e58a04..f870dda126d3c 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(e,t){M.availability_profile=M.availability_profile||{},M.availability_profile.form=e.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,t){this.standardFields=e,this.customFields=t},M.availability_profile.form.getNode=function(t){var n='<span class="availability-group"><label>'+M.util.get_string("conditiontitle","availability_profile")+" "+'<select name="field">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",r;for(var i=0;i<this.standardFields.length;i++)r=this.standardFields[i],n+='<option value="sf_'+r.field+'">'+r.display+"</option>";for(i=0;i<this.customFields.length;i++)r=this.customFields[i],n+='<option value="cf_'+r.field+'">'+r.display+"</option>";n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'">';var s=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"];for(i=0;i<s.length;i++)n+='<option value="'+s[i]+'">'+M.util.get_string("op_"+s[i],"availability_profile")+"</option>";n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>';var o=e.Node.create("<span>"+n+"</span>");t.sf!==undefined&&o.one("select[name=field] > option[value=sf_"+t.sf+"]")?o.one("select[name=field]").set("value","sf_"+t.sf):t.cf!==undefined&&o.one("select[name=field] > option[value=cf_"+t.cf+"]")&&o.one("select[name=field]").set("value","cf_"+t.cf),t.op!==undefined&&o.one("select[name=op] > option[value="+t.op+"]")&&(o.one("select[name=op]").set("value",t.op),(t.op==="isempty"||t.op==="isnotempty")&&o.one("input[name=value]").set("disabled",!0)),t.v!==undefined&&o.one("input").set("value",t.v);if(!M.availability_profile.form.addedEvents){M.availability_profile.form.addedEvents=!0;var u=function(e){var t=e.ancestor("span.availability_profile"),n=t.one("select[name=op]"),r=n.get("value")==="isempty"||n.get("value")==="isnotempty";t.one("input[name=value]").set("disabled",r),M.core_availability.form.update()},a=e.one(".availability-field");a.delegate("change",function(){u(this)},".availability_profile select"),a.delegate("change",function(){u(this)},".availability_profile input[name=value]")}return o},M.availability_profile.form.fillValue=function(e,t){var n=t.one("select[name=field]").get("value");n.substr(0,3)==="sf_"?e.sf=n.substr(3):n.substr(0,3)==="cf_"&&(e.cf=n.substr(3)),e.op=t.one("select[name=op]").get("value");var r=t.one("input[name=value]");r.get("disabled")||(e.v=r.get("value"))},M.availability_profile.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.sf===undefined&&n.cf===undefined&&e.push("availability_profile:error_selectfield"),n.v!==undefined&&/^\s*$/.test(n.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
+YUI.add("moodle-availability_profile-form",function(e,t){M.availability_profile=M.availability_profile||{},M.availability_profile.form=e.Object(M.core_availability.plugin),M.availability_profile.form.profiles=null,M.availability_profile.form.initInner=function(e,t){this.standardFields=e,this.customFields=t},M.availability_profile.form.getNode=function(t){var n='<span class="availability-group"><label><span class="p-r-1">'+M.util.get_string("conditiontitle","availability_profile")+"</span> "+'<select name="field" class="custom-select">'+'<option value="choose">'+M.util.get_string("choosedots","moodle")+"</option>",r;for(var i=0;i<this.standardFields.length;i++)r=this.standardFields[i],n+='<option value="sf_'+r.field+'">'+r.display+"</option>";for(i=0;i<this.customFields.length;i++)r=this.customFields[i],n+='<option value="cf_'+r.field+'">'+r.display+"</option>";n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_operator","availability_profile")+' </span><select name="op" title="'+M.util.get_string("label_operator","availability_profile")+'"'+' class="custom-select">';var s=["isequalto","contains","doesnotcontain","startswith","endswith","isempty","isnotempty"];for(i=0;i<s.length;i++)n+='<option value="'+s[i]+'">'+M.util.get_string("op_"+s[i],"availability_profile")+"</option>";n+='</select></label> <label><span class="accesshide">'+M.util.get_string("label_value","availability_profile")+'</span><input name="value" type="text" class="form-control" style="width: 10em" title="'+M.util.get_string("label_value","availability_profile")+'"/></label></span>';var o=e.Node.create('<span class="form-inline">'+n+"</span>");t.sf!==undefined&&o.one("select[name=field] > option[value=sf_"+t.sf+"]")?o.one("select[name=field]").set("value","sf_"+t.sf):t.cf!==undefined&&o.one("select[name=field] > option[value=cf_"+t.cf+"]")&&o.one("select[name=field]").set("value","cf_"+t.cf),t.op!==undefined&&o.one("select[name=op] > option[value="+t.op+"]")&&(o.one("select[name=op]").set("value",t.op),(t.op==="isempty"||t.op==="isnotempty")&&o.one("input[name=value]").set("disabled",!0)),t.v!==undefined&&o.one("input").set("value",t.v);if(!M.availability_profile.form.addedEvents){M.availability_profile.form.addedEvents=!0;var u=function(e){var t=e.ancestor("span.availability_profile"),n=t.one("select[name=op]"),r=n.get("value")==="isempty"||n.get("value")==="isnotempty";t.one("input[name=value]").set("disabled",r),M.core_availability.form.update()},a=e.one(".availability-field");a.delegate("change",function(){u(this)},".availability_profile select"),a.delegate("change",function(){u(this)},".availability_profile input[name=value]")}return o},M.availability_profile.form.fillValue=function(e,t){var n=t.one("select[name=field]").get("value");n.substr(0,3)==="sf_"?e.sf=n.substr(3):n.substr(0,3)==="cf_"&&(e.cf=n.substr(3)),e.op=t.one("select[name=op]").get("value");var r=t.one("input[name=value]");r.get("disabled")||(e.v=r.get("value"))},M.availability_profile.form.fillErrors=function(e,t){var n={};this.fillValue(n,t),n.sf===undefined&&n.cf===undefined&&e.push("availability_profile:error_selectfield"),n.v!==undefined&&/^\s*$/.test(n.v)&&e.push("availability_profile:error_setvalue")}},"@VERSION@",{requires:["base","node","event","moodle-core_availability-form"]});
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 9909ea2364909..f47ec110a2bfa 100644
--- a/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
+++ b/availability/condition/profile/yui/build/moodle-availability_profile-form/moodle-availability_profile-form.js
@@ -35,8 +35,9 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label>' + M.util.get_string('conditiontitle', 'availability_profile') + ' ' +
-            '<select name="field">' +
+    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+            M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
+            '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     var fieldInfo;
     for (var i = 0; i < this.standardFields.length; i++) {
@@ -50,7 +51,8 @@ M.availability_profile.form.getNode = function(json) {
         html += '<option value="cf_' + fieldInfo.field + '">' + fieldInfo.display + '</option>';
     }
     html += '</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') + '">';
+            ' </span><select name="op" title="' + M.util.get_string('label_operator', 'availability_profile') + '"' +
+                     ' class="custom-select">';
     var operators = ['isequalto', 'contains', 'doesnotcontain', 'startswith', 'endswith',
             'isempty', 'isnotempty'];
     for (i = 0; i < operators.length; i++) {
@@ -58,9 +60,9 @@ M.availability_profile.form.getNode = function(json) {
                 M.util.get_string('op_' + operators[i], 'availability_profile') + '</option>';
     }
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
-            '</span><input name="value" type="text" style="width: 10em" title="' +
+            '</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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + 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 db73335bdca3c..dcab53faa4128 100644
--- a/availability/condition/profile/yui/src/form/js/form.js
+++ b/availability/condition/profile/yui/src/form/js/form.js
@@ -33,8 +33,9 @@ M.availability_profile.form.initInner = function(standardFields, customFields) {
 
 M.availability_profile.form.getNode = function(json) {
     // Create HTML structure.
-    var html = '<span class="availability-group"><label>' + M.util.get_string('conditiontitle', 'availability_profile') + ' ' +
-            '<select name="field">' +
+    var html = '<span class="availability-group"><label><span class="p-r-1">' +
+            M.util.get_string('conditiontitle', 'availability_profile') + '</span> ' +
+            '<select name="field" class="custom-select">' +
             '<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     var fieldInfo;
     for (var i = 0; i < this.standardFields.length; i++) {
@@ -48,7 +49,8 @@ M.availability_profile.form.getNode = function(json) {
         html += '<option value="cf_' + fieldInfo.field + '">' + fieldInfo.display + '</option>';
     }
     html += '</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') + '">';
+            ' </span><select name="op" title="' + M.util.get_string('label_operator', 'availability_profile') + '"' +
+                     ' class="custom-select">';
     var operators = ['isequalto', 'contains', 'doesnotcontain', 'startswith', 'endswith',
             'isempty', 'isnotempty'];
     for (i = 0; i < operators.length; i++) {
@@ -56,9 +58,9 @@ M.availability_profile.form.getNode = function(json) {
                 M.util.get_string('op_' + operators[i], 'availability_profile') + '</option>';
     }
     html += '</select></label> <label><span class="accesshide">' + M.util.get_string('label_value', 'availability_profile') +
-            '</span><input name="value" type="text" style="width: 10em" title="' +
+            '</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>' + html + '</span>');
+    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
 
     // Set initial values if specified.
     if (json.sf !== undefined &&
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
index 40b36ad0e4670..bfdb2fcadced9 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js
@@ -358,21 +358,25 @@ M.core_availability.List = function(json, root, parentRoot) {
     // Create DIV structure (without kids).
     this.node = Y.Node.create('<div class="availability-list"><h3 class="accesshide"></h3>' +
             '<div class="availability-inner">' +
-            '<div class="availability-header">' + M.util.get_string('listheader_sign_before', 'availability') +
+            '<div class="availability-header"><span class="p-l-1">' +
+            M.util.get_string('listheader_sign_before', 'availability') + '</span>' +
             ' <label><span class="accesshide">' + M.util.get_string('label_sign', 'availability') +
-            ' </span><select class="availability-neg" title="' + M.util.get_string('label_sign', 'availability') + '">' +
+            ' </span><select class="availability-neg custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_sign', 'availability') + '">' +
             '<option value="">' + M.util.get_string('listheader_sign_pos', 'availability') + '</option>' +
             '<option value="!">' + M.util.get_string('listheader_sign_neg', 'availability') + '</option></select></label> ' +
             '<span class="availability-single">' + M.util.get_string('listheader_single', 'availability') + '</span>' +
             '<span class="availability-multi">' + M.util.get_string('listheader_multi_before', 'availability') +
             ' <label><span class="accesshide">' + M.util.get_string('label_multi', 'availability') + ' </span>' +
-            '<select class="availability-op" title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
+            '<select class="availability-op custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
             M.util.get_string('listheader_multi_and', 'availability') + '</option>' +
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none">' + M.util.get_string('none', 'moodle') + '</div>' +
-            '<div class="availability-button"></div></div></div>');
+            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="clearfix m-t-1"></div>' +
+            '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
         this.node.addClass('availability-childlist');
     }
@@ -406,12 +410,12 @@ M.core_availability.List = function(json, root, parentRoot) {
         noneNode.appendChild(deleteIcon.span);
 
         // Also if it's not the root, none is actually invalid, so add a label.
-        noneNode.appendChild(Y.Node.create('<span class="label label-warning">' +
+        noneNode.appendChild(Y.Node.create('<span class="m-t-1 label label-warning">' +
                 M.util.get_string('invalid', 'availability') + '</span>'));
     }
 
     // Create the button and add it.
-    var button = Y.Node.create('<button type="button" class="btn btn-default">' +
+    var button = Y.Node.create('<button type="button" class="btn btn-default m-t-1">' +
             M.util.get_string('addrestriction', 'availability') + '</button>');
     button.on("click", function() {
         this.clickAdd();
@@ -667,7 +671,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
  */
 M.core_availability.List.prototype.clickAdd = function() {
     var content = Y.Node.create('<div>' +
-            '<ul class="list-unstyled"></ul>' +
+            '<ul class="list-unstyled container-fluid"></ul>' +
             '<div class="availability-buttons mdl-align">' +
             '<button type="button" class="btn btn-default">' + M.util.get_string('cancel', 'moodle') +
             '</button></div></div>');
@@ -683,25 +687,25 @@ M.core_availability.List.prototype.clickAdd = function() {
             continue;
         }
         // Add entry for plugin.
-        li = Y.Node.create('<li class="clearfix"></li>');
+        li = Y.Node.create('<li class="clearfix row"></li>');
         id = 'availability_addrestriction_' + type;
-        button = Y.Node.create('<button type="button" class="btn btn-default"' +
+        button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
                 'id="' + id + '">' + M.util.get_string('title', 'availability_' + type) + '</button>');
         button.on('click', this.getAddHandler(type, dialogRef), this);
         li.appendChild(button);
-        label = Y.Node.create('<label for="' + id + '">' +
+        label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
                 M.util.get_string('description', 'availability_' + type) + '</label>');
         li.appendChild(label);
         ul.appendChild(li);
     }
     // Extra entry for lists.
-    li = Y.Node.create('<li class="clearfix"></li>');
+    li = Y.Node.create('<li class="clearfix row"></li>');
     id = 'availability_addrestriction_list_';
-    button = Y.Node.create('<button type="button" class="btn btn-default"' +
+    button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
             'id="' + id + '">' + M.util.get_string('condition_group', 'availability') + '</button>');
     button.on('click', this.getAddHandler(null, dialogRef), this);
     li.appendChild(button);
-    label = Y.Node.create('<label for="' + id + '">' +
+    label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
             M.util.get_string('condition_group_info', 'availability') + '</label>');
     li.appendChild(label);
     ul.appendChild(li);
@@ -897,7 +901,7 @@ M.core_availability.Item = function(json, root) {
         this.pluginNode.addClass('availability_' + json.type);
     }
 
-    this.node = Y.Node.create('<div class="availability-item"><h3 class="accesshide"></h3></div>');
+    this.node = Y.Node.create('<div class="availability-item d-inline-block"><h3 class="accesshide"></h3></div>');
 
     // Add eye icon if required. This icon is added for root items, but may be
     // hidden depending on the selected list operator.
@@ -920,7 +924,7 @@ M.core_availability.Item = function(json, root) {
 
     // Add the invalid marker (empty).
     this.node.appendChild(document.createTextNode(' '));
-    this.node.appendChild(Y.Node.create('<span class="label label-warning"/>'));
+    this.node.appendChild(Y.Node.create('<span class="m-t-1 label label-warning"/>'));
 };
 
 /**
@@ -1048,7 +1052,7 @@ M.core_availability.Item.prototype.pluginNode = null;
  */
 M.core_availability.EyeIcon = function(individual, shown) {
     this.individual = individual;
-    this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
+    this.span = Y.Node.create('<a class="availability-eye col-form-label" href="#" role="button">');
     var icon = Y.Node.create('<img />');
     this.span.appendChild(icon);
 
@@ -1128,7 +1132,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
index 2668730afadc0..7b569c3900e56 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js
@@ -1,3 +1,3 @@
-YUI.add("moodle-core_availability-form",function(e,t){M.core_availability=M.core_availability||{},M.core_availability.form={plugins:{},field:null,mainDiv:null,rootList:null,idCounter:0,restrictByGroup:null,init:function(t){for(var n in t){var r=t[n],i=M[r[0]].form;i.init.apply(i,r)}this.field=e.one("#id_availabilityconditionsjson"),this.field.setAttribute("aria-hidden","true"),this.mainDiv=e.Node.create('<div class="availability-field fcontainer"></div>'),this.field.insert(this.mainDiv,"after");var s=this.field.get("value"),o=null;if(s!=="")try{o=e.JSON.parse(s)}catch(u){this.field.set("value","")}this.rootList=new M.core_availability.List(o,!0),this.mainDiv.appendChild(this.rootList.node),this.update(),this.rootList.renumber(),this.mainDiv.setAttribute("aria-live","polite"),this.field.ancestor("form").on("submit",function(){this.mainDiv.all("input,textarea,select").set("disabled",!0)},this),this.restrictByGroup=e.one("#restrictbygroup");if(this.restrictByGroup){this.restrictByGroup.on("click",this.addRestrictByGroup,this);var a=e.one("#id_groupmode"),f=e.one("#id_groupingid");a&&a.on("change",this.updateRestrictByGroup,this),f&&f.on("change",this.updateRestrictByGroup,this),this.updateRestrictByGroup()}},update:function(){var t=this.rootList.getValue(),n=[];this.rootList.fillErrors(n),n.length!==0&&(t.errors=n),this.field.set("value",e.JSON.stringify(t)),this.updateRestrictByGroup()},updateRestrictByGroup:function(){if(!this.restrictByGroup)return;if(this.rootList.getValue().op!=="&"){this.restrictByGroup.set("disabled",!0);return}var t=this.rootList.hasItemOfType("group")||this.rootList.hasItemOfType("grouping");if(t){this.restrictByGroup.set("disabled",!0);return}var n=e.one("#id_groupmode"),r=e.one("#id_groupingid");if((!n||Number(n.get("value"))===0)&&(!r||Number(r.get("value"))===0)){this.restrictByGroup.set("disabled",!0);return}this.restrictByGroup.set("disabled",!1)},addRestrictByGroup:function(t){t.preventDefault();var n=e.one("#id_groupingid"),r;n&&Number(n.get("value"))!==0?r=new M.core_availability.Item({type:"grouping",id:Number(n.get("value"))},!0):r=new M.core_availability.Item({type:"group"},!0),this.rootList.addChild(r),this.update(),this.rootList.renumber(),this.rootList.updateHtml()}},M.core_availability.plugin={allowAdd:!1,init:function(e,t,n){var r=e.replace(/^availability_/,"");this.allowAdd=t,M.core_availability.form.plugins[r]=this,this.initInner.apply(this,n)},initInner:function(){},getNode:function(){throw"getNode not implemented"},fillValue:function(){throw"fillValue not implemented"},fillErrors:function(){},focusAfterAdd:function(e){var t=e.one("input:not([disabled]),select:not([disabled])");t.focus()}},M.core_availability.List=function(t,n,r){this.children=[],n!==undefined&&(this.root=n),this.node=e.Node.create('<div class="availability-list"><h3 class="accesshide"></h3><div class="availability-inner"><div class="availability-header">'+M.util.get_string("listheader_sign_before","availability")+' <label><span class="accesshide">'+M.util.get_string("label_sign","availability")+' </span><select class="availability-neg" title="'+M.util.get_string("label_sign","availability")+'">'+'<option value="">'+M.util.get_string("listheader_sign_pos","availability")+"</option>"+'<option value="!">'+M.util.get_string("listheader_sign_neg","availability")+"</option></select></label> "+'<span class="availability-single">'+M.util.get_string("listheader_single","availability")+"</span>"+'<span class="availability-multi">'+M.util.get_string("listheader_multi_before","availability")+' <label><span class="accesshide">'+M.util.get_string("label_multi","availability")+" </span>"+'<select class="availability-op" title="'+M.util.get_string("label_multi","availability")+'"><option value="&">'+M.util.get_string("listheader_multi_and","availability")+"</option>"+'<option value="|">'+M.util.get_string("listheader_multi_or","availability")+"</option></select></label> "+M.util.get_string("listheader_multi_after","availability")+"</span></div>"+'<div class="availability-children"></div>'+'<div class="availability-none">'+M.util.get_string("none","moodle")+"</div>"+'<div class="availability-button"></div></div></div>'),n||this.node.addClass("availability-childlist"),this.inner=this.node.one("> .availability-inner");var i=!0;n?(t&&t.show!==undefined&&(i=t.show),this.eyeIcon=new M.core_availability.EyeIcon(!1,i),this.node.one(".availability-header").get("firstChild").insert(this.eyeIcon.span,"before")):r&&(t&&t.showc!==undefined&&(i=t.showc),this.eyeIcon=new M.core_availability.EyeIcon(!1,i),this.inner.insert(this.eyeIcon.span,"before"));if(!n){var s=new M.core_availability.DeleteIcon(this),o=this.node.one(".availability-none");o.appendChild(document.createTextNode(" ")),o.appendChild(s.span),o.appendChild(e.Node.create('<span class="label label-warning">'+M.util.get_string("invalid","availability")+"</span>"))}var u=e.Node.create('<button type="button" class="btn btn-default">'+M.util.get_string("addrestriction","availability")+"</button>");u.on("click",function(){this.clickAdd()},this),this.node.one("div.availability-button").appendChild(u);if(t){switch(t.op){case"&":case"|":this.node.one(".availability-neg").set("value","");break;case"!&":case"!|":this.node.one(".availability-neg").set("value","!")}switch(t.op){case"&":case"!&":this.node.one(".availability-op").set("value","&");break;case"|":case"!|":this.node.one(".availability-op").set("value","|")}for(var a=0;a<t.c.length;a++){var f=t.c[a];this.root&&t&&t.showc!==undefined&&(f.showc=t.showc[a]);var l;f.type!==undefined?l=new M.core_availability.Item(f,this.root):l=new M.core_availability.List(f,!1,this.root),this.addChild(l)}}this.node.one(".availability-neg").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.node.one(".availability-op").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.updateHtml()},M.core_availability.List.prototype.addChild=function(t){this.children
-.length>0&&this.inner.one(".availability-children").appendChild(e.Node.create('<div class="availability-connector"><span class="label"></span></div>')),this.children.push(t),this.inner.one(".availability-children").appendChild(t.node)},M.core_availability.List.prototype.focusAfterAdd=function(){this.inner.one("button").focus()},M.core_availability.List.prototype.isIndividualShowIcons=function(){if(!this.root)throw"Can only call this on root list";var e=this.node.one(".availability-neg").get("value")==="!",t=this.node.one(".availability-op").get("value")==="|";return!e&&!t||e&&t},M.core_availability.List.prototype.renumber=function(e){var t={count:this.children.length},n;e===undefined?(t.number="",n=""):(t.number=e+":",n=e+".");var r=M.util.get_string("setheading","availability",t);this.node.one("> h3").set("innerHTML",r);for(var i=0;i<this.children.length;i++){var s=this.children[i];s.renumber(n+(i+1))}},M.core_availability.List.prototype.updateHtml=function(){this.children.length>0?(this.inner.one("> .availability-children").removeAttribute("aria-hidden"),this.inner.one("> .availability-none").setAttribute("aria-hidden","true"),this.inner.one("> .availability-header").removeAttribute("aria-hidden"),this.children.length>1?(this.inner.one(".availability-single").setAttribute("aria-hidden","true"),this.inner.one(".availability-multi").removeAttribute("aria-hidden")):(this.inner.one(".availability-single").removeAttribute("aria-hidden"),this.inner.one(".availability-multi").setAttribute("aria-hidden","true"))):(this.inner.one("> .availability-children").setAttribute("aria-hidden","true"),this.inner.one("> .availability-none").removeAttribute("aria-hidden"),this.inner.one("> .availability-header").setAttribute("aria-hidden","true"));if(this.root){var e=this.isIndividualShowIcons();for(var t=0;t<this.children.length;t++){var n=this.children[t];e?n.eyeIcon.span.removeAttribute("aria-hidden"):n.eyeIcon.span.setAttribute("aria-hidden","true")}e?this.eyeIcon.span.setAttribute("aria-hidden","true"):this.eyeIcon.span.removeAttribute("aria-hidden")}var r;this.inner.one(".availability-op").get("value")==="&"?r=M.util.get_string("and","availability"):r=M.util.get_string("or","availability"),this.inner.all("> .availability-children > .availability-connector span.label").each(function(e){e.set("innerHTML",r)})},M.core_availability.List.prototype.deleteDescendant=function(e){for(var t=0;t<this.children.length;t++){var n=this.children[t];if(n===e){this.children.splice(t,1);var r=n.node;return this.children.length>0&&(r.previous(".availability-connector")?r.previous(".availability-connector").remove():r.next(".availability-connector").remove()),this.inner.one("> .availability-children").removeChild(r),M.core_availability.form.update(),this.updateHtml(),this.inner.one("> .availability-button").one("button").focus(),!0}if(n instanceof M.core_availability.List){var i=n.deleteDescendant(e);if(i)return!0}}return!1},M.core_availability.List.prototype.clickAdd=function(){var t=e.Node.create('<div><ul class="list-unstyled"></ul><div class="availability-buttons mdl-align"><button type="button" class="btn btn-default">'+M.util.get_string("cancel","moodle")+"</button></div></div>"),n=t.one("button"),r={dialog:null},i=t.one("ul"),s,o,u,a;for(var f in M.core_availability.form.plugins){if(!M.core_availability.form.plugins[f].allowAdd)continue;s=e.Node.create('<li class="clearfix"></li>'),o="availability_addrestriction_"+f,u=e.Node.create('<button type="button" class="btn btn-default"id="'+o+'">'+M.util.get_string("title","availability_"+f)+"</button>"),u.on("click",this.getAddHandler(f,r),this),s.appendChild(u),a=e.Node.create('<label for="'+o+'">'+M.util.get_string("description","availability_"+f)+"</label>"),s.appendChild(a),i.appendChild(s)}s=e.Node.create('<li class="clearfix"></li>'),o="availability_addrestriction_list_",u=e.Node.create('<button type="button" class="btn btn-default"id="'+o+'">'+M.util.get_string("condition_group","availability")+"</button>"),u.on("click",this.getAddHandler(null,r),this),s.appendChild(u),a=e.Node.create('<label for="'+o+'">'+M.util.get_string("condition_group_info","availability")+"</label>"),s.appendChild(a),i.appendChild(s);var l={headerContent:M.util.get_string("addrestriction","availability"),bodyContent:t,additionalBaseClass:"availability-dialogue",draggable:!0,modal:!0,closeButton:!1,width:"450px"};r.dialog=new M.core.dialogue(l),r.dialog.show(),n.on("click",function(){r.dialog.destroy(),this.inner.one("> .availability-button").one("button").focus()},this)},M.core_availability.List.prototype.getAddHandler=function(e,t){return function(){var n;e?n=new M.core_availability.Item({type:e,creating:!0},this.root):n=new M.core_availability.List({c:[],showc:!0},!1,this.root),this.addChild(n),M.core_availability.form.update(),M.core_availability.form.rootList.renumber(),this.updateHtml(),t.dialog.destroy(),n.focusAfterAdd()}},M.core_availability.List.prototype.getValue=function(){var e={};e.op=this.node.one(".availability-neg").get("value")+this.node.one(".availability-op").get("value"),e.c=[];var t;for(t=0;t<this.children.length;t++)e.c.push(this.children[t].getValue());if(this.root)if(this.isIndividualShowIcons()){e.showc=[];for(t=0;t<this.children.length;t++)e.showc.push(!this.children[t].eyeIcon.isHidden())}else e.show=!this.eyeIcon.isHidden();return e},M.core_availability.List.prototype.fillErrors=function(e){this.children.length===0&&!this.root&&e.push("availability:error_list_nochildren");for(var t=0;t<this.children.length;t++)this.children[t].fillErrors(e)},M.core_availability.List.prototype.hasItemOfType=function(e){for(var t=0;t<this.children.length;t++){var n=this.children[t];if(n instanceof M.core_availability.List){if(n.hasItemOfType(e))return!0}else if(n.pluginType===e)return!0}return!1},M.core_availability.List.prototype.eyeIcon=null,M.core_availability.List.prototype.root=!1,M.core_availability.List.prototype.children=null,M.core_availability.List.prototype.node=null,M.core_availability
-.List.prototype.inner=null,M.core_availability.Item=function(t,n){this.pluginType=t.type,M.core_availability.form.plugins[t.type]===undefined?(this.plugin=null,this.pluginNode=e.Node.create('<div class="availability-warning">'+M.util.get_string("missingplugin","availability")+"</div>")):(this.plugin=M.core_availability.form.plugins[t.type],this.pluginNode=this.plugin.getNode(t),this.pluginNode.addClass("availability_"+t.type)),this.node=e.Node.create('<div class="availability-item"><h3 class="accesshide"></h3></div>');if(n){var r=!0;t.showc!==undefined&&(r=t.showc),this.eyeIcon=new M.core_availability.EyeIcon(!0,r),this.node.appendChild(this.eyeIcon.span)}this.pluginNode.addClass("availability-plugincontrols"),this.node.appendChild(this.pluginNode);var i=new M.core_availability.DeleteIcon(this);this.node.appendChild(i.span),this.node.appendChild(document.createTextNode(" ")),this.node.appendChild(e.Node.create('<span class="label label-warning"/>'))},M.core_availability.Item.prototype.getValue=function(){var e={type:this.pluginType};return this.plugin&&this.plugin.fillValue(e,this.pluginNode),e},M.core_availability.Item.prototype.fillErrors=function(e){var t=e.length;this.plugin?this.plugin.fillErrors(e,this.pluginNode):e.push("core_availability:item_unknowntype");var n=this.node.one("> .label-warning");e.length!==t&&!n.get("firstChild")?n.appendChild(document.createTextNode(M.util.get_string("invalid","availability"))):e.length===t&&n.get("firstChild")&&n.get("firstChild").remove()},M.core_availability.Item.prototype.renumber=function(e){var t={number:e};this.plugin?t.type=M.util.get_string("title","availability_"+this.pluginType):t.type="["+this.pluginType+"]",t.number=e+":";var n=M.util.get_string("itemheading","availability",t);this.node.one("> h3").set("innerHTML",n)},M.core_availability.Item.prototype.focusAfterAdd=function(){this.plugin.focusAfterAdd(this.pluginNode)},M.core_availability.Item.prototype.pluginType=null,M.core_availability.Item.prototype.plugin=null,M.core_availability.Item.prototype.eyeIcon=null,M.core_availability.Item.prototype.node=null,M.core_availability.Item.prototype.pluginNode=null,M.core_availability.EyeIcon=function(t,n){this.individual=t,this.span=e.Node.create('<a class="availability-eye" href="#" role="button">');var r=e.Node.create("<img />");this.span.appendChild(r);var i=t?"_individual":"_all",s=function(){var e=M.util.get_string("hidden"+i,"availability");r.set("src",M.util.image_url("i/show","core")),r.set("alt",e),this.span.set("title",e+" \u2022 "+M.util.get_string("show_verb","availability"))},o=function(){var e=M.util.get_string("shown"+i,"availability");r.set("src",M.util.image_url("i/hide","core")),r.set("alt",e),this.span.set("title",e+" \u2022 "+M.util.get_string("hide_verb","availability"))};n?o.call(this):s.call(this);var u=function(e){e.preventDefault(),this.isHidden()?o.call(this):s.call(this),M.core_availability.form.update()};this.span.on("click",u,this),this.span.on("key",u,"up:32",this),this.span.on("key",function(e){e.preventDefault()},"down:32",this)},M.core_availability.EyeIcon.prototype.individual=!1,M.core_availability.EyeIcon.prototype.span=null,M.core_availability.EyeIcon.prototype.isHidden=function(){var e=this.individual?"_individual":"_all",t=M.util.get_string("hidden"+e,"availability");return this.span.one("img").get("alt")===t},M.core_availability.DeleteIcon=function(t){this.span=e.Node.create('<a class="availability-delete" href="#" title="'+M.util.get_string("delete","moodle")+'" role="button">');var n=e.Node.create('<img src="'+M.util.image_url("t/delete","core")+'" alt="'+M.util.get_string("delete","moodle")+'" />');this.span.appendChild(n);var r=function(e){e.preventDefault(),M.core_availability.form.rootList.deleteDescendant(t),M.core_availability.form.rootList.renumber()};this.span.on("click",r,this),this.span.on("key",r,"up:32",this),this.span.on("key",function(e){e.preventDefault()},"down:32",this)},M.core_availability.DeleteIcon.prototype.span=null},"@VERSION@",{requires:["base","node","event","event-delegate","panel","moodle-core-notification-dialogue","json"]});
+YUI.add("moodle-core_availability-form",function(e,t){M.core_availability=M.core_availability||{},M.core_availability.form={plugins:{},field:null,mainDiv:null,rootList:null,idCounter:0,restrictByGroup:null,init:function(t){for(var n in t){var r=t[n],i=M[r[0]].form;i.init.apply(i,r)}this.field=e.one("#id_availabilityconditionsjson"),this.field.setAttribute("aria-hidden","true"),this.mainDiv=e.Node.create('<div class="availability-field fcontainer"></div>'),this.field.insert(this.mainDiv,"after");var s=this.field.get("value"),o=null;if(s!=="")try{o=e.JSON.parse(s)}catch(u){this.field.set("value","")}this.rootList=new M.core_availability.List(o,!0),this.mainDiv.appendChild(this.rootList.node),this.update(),this.rootList.renumber(),this.mainDiv.setAttribute("aria-live","polite"),this.field.ancestor("form").on("submit",function(){this.mainDiv.all("input,textarea,select").set("disabled",!0)},this),this.restrictByGroup=e.one("#restrictbygroup");if(this.restrictByGroup){this.restrictByGroup.on("click",this.addRestrictByGroup,this);var a=e.one("#id_groupmode"),f=e.one("#id_groupingid");a&&a.on("change",this.updateRestrictByGroup,this),f&&f.on("change",this.updateRestrictByGroup,this),this.updateRestrictByGroup()}},update:function(){var t=this.rootList.getValue(),n=[];this.rootList.fillErrors(n),n.length!==0&&(t.errors=n),this.field.set("value",e.JSON.stringify(t)),this.updateRestrictByGroup()},updateRestrictByGroup:function(){if(!this.restrictByGroup)return;if(this.rootList.getValue().op!=="&"){this.restrictByGroup.set("disabled",!0);return}var t=this.rootList.hasItemOfType("group")||this.rootList.hasItemOfType("grouping");if(t){this.restrictByGroup.set("disabled",!0);return}var n=e.one("#id_groupmode"),r=e.one("#id_groupingid");if((!n||Number(n.get("value"))===0)&&(!r||Number(r.get("value"))===0)){this.restrictByGroup.set("disabled",!0);return}this.restrictByGroup.set("disabled",!1)},addRestrictByGroup:function(t){t.preventDefault();var n=e.one("#id_groupingid"),r;n&&Number(n.get("value"))!==0?r=new M.core_availability.Item({type:"grouping",id:Number(n.get("value"))},!0):r=new M.core_availability.Item({type:"group"},!0),this.rootList.addChild(r),this.update(),this.rootList.renumber(),this.rootList.updateHtml()}},M.core_availability.plugin={allowAdd:!1,init:function(e,t,n){var r=e.replace(/^availability_/,"");this.allowAdd=t,M.core_availability.form.plugins[r]=this,this.initInner.apply(this,n)},initInner:function(){},getNode:function(){throw"getNode not implemented"},fillValue:function(){throw"fillValue not implemented"},fillErrors:function(){},focusAfterAdd:function(e){var t=e.one("input:not([disabled]),select:not([disabled])");t.focus()}},M.core_availability.List=function(t,n,r){this.children=[],n!==undefined&&(this.root=n),this.node=e.Node.create('<div class="availability-list"><h3 class="accesshide"></h3><div class="availability-inner"><div class="availability-header"><span class="p-l-1">'+M.util.get_string("listheader_sign_before","availability")+"</span>"+' <label><span class="accesshide">'+M.util.get_string("label_sign","availability")+' </span><select class="availability-neg custom-select m-x-1"'+' title="'+M.util.get_string("label_sign","availability")+'">'+'<option value="">'+M.util.get_string("listheader_sign_pos","availability")+"</option>"+'<option value="!">'+M.util.get_string("listheader_sign_neg","availability")+"</option></select></label> "+'<span class="availability-single">'+M.util.get_string("listheader_single","availability")+"</span>"+'<span class="availability-multi">'+M.util.get_string("listheader_multi_before","availability")+' <label><span class="accesshide">'+M.util.get_string("label_multi","availability")+" </span>"+'<select class="availability-op custom-select m-x-1"'+' title="'+M.util.get_string("label_multi","availability")+'"><option value="&">'+M.util.get_string("listheader_multi_and","availability")+"</option>"+'<option value="|">'+M.util.get_string("listheader_multi_or","availability")+"</option></select></label> "+M.util.get_string("listheader_multi_after","availability")+"</span></div>"+'<div class="availability-children"></div>'+'<div class="availability-none"><span class="p-x-1">'+M.util.get_string("none","moodle")+"</span></div>"+'<div class="clearfix m-t-1"></div>'+'<div class="availability-button"></div></div><div class="clearfix"></div></div>'),n||this.node.addClass("availability-childlist"),this.inner=this.node.one("> .availability-inner");var i=!0;n?(t&&t.show!==undefined&&(i=t.show),this.eyeIcon=new M.core_availability.EyeIcon(!1,i),this.node.one(".availability-header").get("firstChild").insert(this.eyeIcon.span,"before")):r&&(t&&t.showc!==undefined&&(i=t.showc),this.eyeIcon=new M.core_availability.EyeIcon(!1,i),this.inner.insert(this.eyeIcon.span,"before"));if(!n){var s=new M.core_availability.DeleteIcon(this),o=this.node.one(".availability-none");o.appendChild(document.createTextNode(" ")),o.appendChild(s.span),o.appendChild(e.Node.create('<span class="m-t-1 label label-warning">'+M.util.get_string("invalid","availability")+"</span>"))}var u=e.Node.create('<button type="button" class="btn btn-default m-t-1">'+M.util.get_string("addrestriction","availability")+"</button>");u.on("click",function(){this.clickAdd()},this),this.node.one("div.availability-button").appendChild(u);if(t){switch(t.op){case"&":case"|":this.node.one(".availability-neg").set("value","");break;case"!&":case"!|":this.node.one(".availability-neg").set("value","!")}switch(t.op){case"&":case"!&":this.node.one(".availability-op").set("value","&");break;case"|":case"!|":this.node.one(".availability-op").set("value","|")}for(var a=0;a<t.c.length;a++){var f=t.c[a];this.root&&t&&t.showc!==undefined&&(f.showc=t.showc[a]);var l;f.type!==undefined?l=new M.core_availability.Item(f,this.root):l=new M.core_availability.List(f,!1,this.root),this.addChild(l)}}this.node.one(".availability-neg").on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.node.one(".availability-op"
+).on("change",function(){M.core_availability.form.update(),this.updateHtml()},this),this.updateHtml()},M.core_availability.List.prototype.addChild=function(t){this.children.length>0&&this.inner.one(".availability-children").appendChild(e.Node.create('<div class="availability-connector"><span class="label"></span></div>')),this.children.push(t),this.inner.one(".availability-children").appendChild(t.node)},M.core_availability.List.prototype.focusAfterAdd=function(){this.inner.one("button").focus()},M.core_availability.List.prototype.isIndividualShowIcons=function(){if(!this.root)throw"Can only call this on root list";var e=this.node.one(".availability-neg").get("value")==="!",t=this.node.one(".availability-op").get("value")==="|";return!e&&!t||e&&t},M.core_availability.List.prototype.renumber=function(e){var t={count:this.children.length},n;e===undefined?(t.number="",n=""):(t.number=e+":",n=e+".");var r=M.util.get_string("setheading","availability",t);this.node.one("> h3").set("innerHTML",r);for(var i=0;i<this.children.length;i++){var s=this.children[i];s.renumber(n+(i+1))}},M.core_availability.List.prototype.updateHtml=function(){this.children.length>0?(this.inner.one("> .availability-children").removeAttribute("aria-hidden"),this.inner.one("> .availability-none").setAttribute("aria-hidden","true"),this.inner.one("> .availability-header").removeAttribute("aria-hidden"),this.children.length>1?(this.inner.one(".availability-single").setAttribute("aria-hidden","true"),this.inner.one(".availability-multi").removeAttribute("aria-hidden")):(this.inner.one(".availability-single").removeAttribute("aria-hidden"),this.inner.one(".availability-multi").setAttribute("aria-hidden","true"))):(this.inner.one("> .availability-children").setAttribute("aria-hidden","true"),this.inner.one("> .availability-none").removeAttribute("aria-hidden"),this.inner.one("> .availability-header").setAttribute("aria-hidden","true"));if(this.root){var e=this.isIndividualShowIcons();for(var t=0;t<this.children.length;t++){var n=this.children[t];e?n.eyeIcon.span.removeAttribute("aria-hidden"):n.eyeIcon.span.setAttribute("aria-hidden","true")}e?this.eyeIcon.span.setAttribute("aria-hidden","true"):this.eyeIcon.span.removeAttribute("aria-hidden")}var r;this.inner.one(".availability-op").get("value")==="&"?r=M.util.get_string("and","availability"):r=M.util.get_string("or","availability"),this.inner.all("> .availability-children > .availability-connector span.label").each(function(e){e.set("innerHTML",r)})},M.core_availability.List.prototype.deleteDescendant=function(e){for(var t=0;t<this.children.length;t++){var n=this.children[t];if(n===e){this.children.splice(t,1);var r=n.node;return this.children.length>0&&(r.previous(".availability-connector")?r.previous(".availability-connector").remove():r.next(".availability-connector").remove()),this.inner.one("> .availability-children").removeChild(r),M.core_availability.form.update(),this.updateHtml(),this.inner.one("> .availability-button").one("button").focus(),!0}if(n instanceof M.core_availability.List){var i=n.deleteDescendant(e);if(i)return!0}}return!1},M.core_availability.List.prototype.clickAdd=function(){var t=e.Node.create('<div><ul class="list-unstyled container-fluid"></ul><div class="availability-buttons mdl-align"><button type="button" class="btn btn-default">'+M.util.get_string("cancel","moodle")+"</button></div></div>"),n=t.one("button"),r={dialog:null},i=t.one("ul"),s,o,u,a;for(var f in M.core_availability.form.plugins){if(!M.core_availability.form.plugins[f].allowAdd)continue;s=e.Node.create('<li class="clearfix row"></li>'),o="availability_addrestriction_"+f,u=e.Node.create('<button type="button" class="btn btn-default col-xs-6"id="'+o+'">'+M.util.get_string("title","availability_"+f)+"</button>"),u.on("click",this.getAddHandler(f,r),this),s.appendChild(u),a=e.Node.create('<label for="'+o+'" class="col-xs-6">'+M.util.get_string("description","availability_"+f)+"</label>"),s.appendChild(a),i.appendChild(s)}s=e.Node.create('<li class="clearfix row"></li>'),o="availability_addrestriction_list_",u=e.Node.create('<button type="button" class="btn btn-default col-xs-6"id="'+o+'">'+M.util.get_string("condition_group","availability")+"</button>"),u.on("click",this.getAddHandler(null,r),this),s.appendChild(u),a=e.Node.create('<label for="'+o+'" class="col-xs-6">'+M.util.get_string("condition_group_info","availability")+"</label>"),s.appendChild(a),i.appendChild(s);var l={headerContent:M.util.get_string("addrestriction","availability"),bodyContent:t,additionalBaseClass:"availability-dialogue",draggable:!0,modal:!0,closeButton:!1,width:"450px"};r.dialog=new M.core.dialogue(l),r.dialog.show(),n.on("click",function(){r.dialog.destroy(),this.inner.one("> .availability-button").one("button").focus()},this)},M.core_availability.List.prototype.getAddHandler=function(e,t){return function(){var n;e?n=new M.core_availability.Item({type:e,creating:!0},this.root):n=new M.core_availability.List({c:[],showc:!0},!1,this.root),this.addChild(n),M.core_availability.form.update(),M.core_availability.form.rootList.renumber(),this.updateHtml(),t.dialog.destroy(),n.focusAfterAdd()}},M.core_availability.List.prototype.getValue=function(){var e={};e.op=this.node.one(".availability-neg").get("value")+this.node.one(".availability-op").get("value"),e.c=[];var t;for(t=0;t<this.children.length;t++)e.c.push(this.children[t].getValue());if(this.root)if(this.isIndividualShowIcons()){e.showc=[];for(t=0;t<this.children.length;t++)e.showc.push(!this.children[t].eyeIcon.isHidden())}else e.show=!this.eyeIcon.isHidden();return e},M.core_availability.List.prototype.fillErrors=function(e){this.children.length===0&&!this.root&&e.push("availability:error_list_nochildren");for(var t=0;t<this.children.length;t++)this.children[t].fillErrors(e)},M.core_availability.List.prototype.hasItemOfType=function(e){for(var t=0;t<this.children.length;t++){var n=this.children[t];if(n instanceof M.core_availability.List){if(n.hasItemOfType
+(e))return!0}else if(n.pluginType===e)return!0}return!1},M.core_availability.List.prototype.eyeIcon=null,M.core_availability.List.prototype.root=!1,M.core_availability.List.prototype.children=null,M.core_availability.List.prototype.node=null,M.core_availability.List.prototype.inner=null,M.core_availability.Item=function(t,n){this.pluginType=t.type,M.core_availability.form.plugins[t.type]===undefined?(this.plugin=null,this.pluginNode=e.Node.create('<div class="availability-warning">'+M.util.get_string("missingplugin","availability")+"</div>")):(this.plugin=M.core_availability.form.plugins[t.type],this.pluginNode=this.plugin.getNode(t),this.pluginNode.addClass("availability_"+t.type)),this.node=e.Node.create('<div class="availability-item d-inline-block"><h3 class="accesshide"></h3></div>');if(n){var r=!0;t.showc!==undefined&&(r=t.showc),this.eyeIcon=new M.core_availability.EyeIcon(!0,r),this.node.appendChild(this.eyeIcon.span)}this.pluginNode.addClass("availability-plugincontrols"),this.node.appendChild(this.pluginNode);var i=new M.core_availability.DeleteIcon(this);this.node.appendChild(i.span),this.node.appendChild(document.createTextNode(" ")),this.node.appendChild(e.Node.create('<span class="m-t-1 label label-warning"/>'))},M.core_availability.Item.prototype.getValue=function(){var e={type:this.pluginType};return this.plugin&&this.plugin.fillValue(e,this.pluginNode),e},M.core_availability.Item.prototype.fillErrors=function(e){var t=e.length;this.plugin?this.plugin.fillErrors(e,this.pluginNode):e.push("core_availability:item_unknowntype");var n=this.node.one("> .label-warning");e.length!==t&&!n.get("firstChild")?n.appendChild(document.createTextNode(M.util.get_string("invalid","availability"))):e.length===t&&n.get("firstChild")&&n.get("firstChild").remove()},M.core_availability.Item.prototype.renumber=function(e){var t={number:e};this.plugin?t.type=M.util.get_string("title","availability_"+this.pluginType):t.type="["+this.pluginType+"]",t.number=e+":";var n=M.util.get_string("itemheading","availability",t);this.node.one("> h3").set("innerHTML",n)},M.core_availability.Item.prototype.focusAfterAdd=function(){this.plugin.focusAfterAdd(this.pluginNode)},M.core_availability.Item.prototype.pluginType=null,M.core_availability.Item.prototype.plugin=null,M.core_availability.Item.prototype.eyeIcon=null,M.core_availability.Item.prototype.node=null,M.core_availability.Item.prototype.pluginNode=null,M.core_availability.EyeIcon=function(t,n){this.individual=t,this.span=e.Node.create('<a class="availability-eye col-form-label" href="#" role="button">');var r=e.Node.create("<img />");this.span.appendChild(r);var i=t?"_individual":"_all",s=function(){var e=M.util.get_string("hidden"+i,"availability");r.set("src",M.util.image_url("i/show","core")),r.set("alt",e),this.span.set("title",e+" \u2022 "+M.util.get_string("show_verb","availability"))},o=function(){var e=M.util.get_string("shown"+i,"availability");r.set("src",M.util.image_url("i/hide","core")),r.set("alt",e),this.span.set("title",e+" \u2022 "+M.util.get_string("hide_verb","availability"))};n?o.call(this):s.call(this);var u=function(e){e.preventDefault(),this.isHidden()?o.call(this):s.call(this),M.core_availability.form.update()};this.span.on("click",u,this),this.span.on("key",u,"up:32",this),this.span.on("key",function(e){e.preventDefault()},"down:32",this)},M.core_availability.EyeIcon.prototype.individual=!1,M.core_availability.EyeIcon.prototype.span=null,M.core_availability.EyeIcon.prototype.isHidden=function(){var e=this.individual?"_individual":"_all",t=M.util.get_string("hidden"+e,"availability");return this.span.one("img").get("alt")===t},M.core_availability.DeleteIcon=function(t){this.span=e.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="'+M.util.get_string("delete","moodle")+'" role="button">');var n=e.Node.create('<img src="'+M.util.image_url("t/delete","core")+'" alt="'+M.util.get_string("delete","moodle")+'" />');this.span.appendChild(n);var r=function(e){e.preventDefault(),M.core_availability.form.rootList.deleteDescendant(t),M.core_availability.form.rootList.renumber()};this.span.on("click",r,this),this.span.on("key",r,"up:32",this),this.span.on("key",function(e){e.preventDefault()},"down:32",this)},M.core_availability.DeleteIcon.prototype.span=null},"@VERSION@",{requires:["base","node","event","event-delegate","panel","moodle-core-notification-dialogue","json"]});
diff --git a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
index 40b36ad0e4670..bfdb2fcadced9 100644
--- a/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
+++ b/availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js
@@ -358,21 +358,25 @@ M.core_availability.List = function(json, root, parentRoot) {
     // Create DIV structure (without kids).
     this.node = Y.Node.create('<div class="availability-list"><h3 class="accesshide"></h3>' +
             '<div class="availability-inner">' +
-            '<div class="availability-header">' + M.util.get_string('listheader_sign_before', 'availability') +
+            '<div class="availability-header"><span class="p-l-1">' +
+            M.util.get_string('listheader_sign_before', 'availability') + '</span>' +
             ' <label><span class="accesshide">' + M.util.get_string('label_sign', 'availability') +
-            ' </span><select class="availability-neg" title="' + M.util.get_string('label_sign', 'availability') + '">' +
+            ' </span><select class="availability-neg custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_sign', 'availability') + '">' +
             '<option value="">' + M.util.get_string('listheader_sign_pos', 'availability') + '</option>' +
             '<option value="!">' + M.util.get_string('listheader_sign_neg', 'availability') + '</option></select></label> ' +
             '<span class="availability-single">' + M.util.get_string('listheader_single', 'availability') + '</span>' +
             '<span class="availability-multi">' + M.util.get_string('listheader_multi_before', 'availability') +
             ' <label><span class="accesshide">' + M.util.get_string('label_multi', 'availability') + ' </span>' +
-            '<select class="availability-op" title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
+            '<select class="availability-op custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
             M.util.get_string('listheader_multi_and', 'availability') + '</option>' +
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none">' + M.util.get_string('none', 'moodle') + '</div>' +
-            '<div class="availability-button"></div></div></div>');
+            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="clearfix m-t-1"></div>' +
+            '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
         this.node.addClass('availability-childlist');
     }
@@ -406,12 +410,12 @@ M.core_availability.List = function(json, root, parentRoot) {
         noneNode.appendChild(deleteIcon.span);
 
         // Also if it's not the root, none is actually invalid, so add a label.
-        noneNode.appendChild(Y.Node.create('<span class="label label-warning">' +
+        noneNode.appendChild(Y.Node.create('<span class="m-t-1 label label-warning">' +
                 M.util.get_string('invalid', 'availability') + '</span>'));
     }
 
     // Create the button and add it.
-    var button = Y.Node.create('<button type="button" class="btn btn-default">' +
+    var button = Y.Node.create('<button type="button" class="btn btn-default m-t-1">' +
             M.util.get_string('addrestriction', 'availability') + '</button>');
     button.on("click", function() {
         this.clickAdd();
@@ -667,7 +671,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
  */
 M.core_availability.List.prototype.clickAdd = function() {
     var content = Y.Node.create('<div>' +
-            '<ul class="list-unstyled"></ul>' +
+            '<ul class="list-unstyled container-fluid"></ul>' +
             '<div class="availability-buttons mdl-align">' +
             '<button type="button" class="btn btn-default">' + M.util.get_string('cancel', 'moodle') +
             '</button></div></div>');
@@ -683,25 +687,25 @@ M.core_availability.List.prototype.clickAdd = function() {
             continue;
         }
         // Add entry for plugin.
-        li = Y.Node.create('<li class="clearfix"></li>');
+        li = Y.Node.create('<li class="clearfix row"></li>');
         id = 'availability_addrestriction_' + type;
-        button = Y.Node.create('<button type="button" class="btn btn-default"' +
+        button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
                 'id="' + id + '">' + M.util.get_string('title', 'availability_' + type) + '</button>');
         button.on('click', this.getAddHandler(type, dialogRef), this);
         li.appendChild(button);
-        label = Y.Node.create('<label for="' + id + '">' +
+        label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
                 M.util.get_string('description', 'availability_' + type) + '</label>');
         li.appendChild(label);
         ul.appendChild(li);
     }
     // Extra entry for lists.
-    li = Y.Node.create('<li class="clearfix"></li>');
+    li = Y.Node.create('<li class="clearfix row"></li>');
     id = 'availability_addrestriction_list_';
-    button = Y.Node.create('<button type="button" class="btn btn-default"' +
+    button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
             'id="' + id + '">' + M.util.get_string('condition_group', 'availability') + '</button>');
     button.on('click', this.getAddHandler(null, dialogRef), this);
     li.appendChild(button);
-    label = Y.Node.create('<label for="' + id + '">' +
+    label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
             M.util.get_string('condition_group_info', 'availability') + '</label>');
     li.appendChild(label);
     ul.appendChild(li);
@@ -897,7 +901,7 @@ M.core_availability.Item = function(json, root) {
         this.pluginNode.addClass('availability_' + json.type);
     }
 
-    this.node = Y.Node.create('<div class="availability-item"><h3 class="accesshide"></h3></div>');
+    this.node = Y.Node.create('<div class="availability-item d-inline-block"><h3 class="accesshide"></h3></div>');
 
     // Add eye icon if required. This icon is added for root items, but may be
     // hidden depending on the selected list operator.
@@ -920,7 +924,7 @@ M.core_availability.Item = function(json, root) {
 
     // Add the invalid marker (empty).
     this.node.appendChild(document.createTextNode(' '));
-    this.node.appendChild(Y.Node.create('<span class="label label-warning"/>'));
+    this.node.appendChild(Y.Node.create('<span class="m-t-1 label label-warning"/>'));
 };
 
 /**
@@ -1048,7 +1052,7 @@ M.core_availability.Item.prototype.pluginNode = null;
  */
 M.core_availability.EyeIcon = function(individual, shown) {
     this.individual = individual;
-    this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
+    this.span = Y.Node.create('<a class="availability-eye col-form-label" href="#" role="button">');
     var icon = Y.Node.create('<img />');
     this.span.appendChild(icon);
 
@@ -1128,7 +1132,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/availability/yui/src/form/js/form.js b/availability/yui/src/form/js/form.js
index e99abb087cf83..a2cc382efbe2e 100644
--- a/availability/yui/src/form/js/form.js
+++ b/availability/yui/src/form/js/form.js
@@ -356,21 +356,25 @@ M.core_availability.List = function(json, root, parentRoot) {
     // Create DIV structure (without kids).
     this.node = Y.Node.create('<div class="availability-list"><h3 class="accesshide"></h3>' +
             '<div class="availability-inner">' +
-            '<div class="availability-header">' + M.util.get_string('listheader_sign_before', 'availability') +
+            '<div class="availability-header"><span class="p-l-1">' +
+            M.util.get_string('listheader_sign_before', 'availability') + '</span>' +
             ' <label><span class="accesshide">' + M.util.get_string('label_sign', 'availability') +
-            ' </span><select class="availability-neg" title="' + M.util.get_string('label_sign', 'availability') + '">' +
+            ' </span><select class="availability-neg custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_sign', 'availability') + '">' +
             '<option value="">' + M.util.get_string('listheader_sign_pos', 'availability') + '</option>' +
             '<option value="!">' + M.util.get_string('listheader_sign_neg', 'availability') + '</option></select></label> ' +
             '<span class="availability-single">' + M.util.get_string('listheader_single', 'availability') + '</span>' +
             '<span class="availability-multi">' + M.util.get_string('listheader_multi_before', 'availability') +
             ' <label><span class="accesshide">' + M.util.get_string('label_multi', 'availability') + ' </span>' +
-            '<select class="availability-op" title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
+            '<select class="availability-op custom-select m-x-1"' +
+            ' title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
             M.util.get_string('listheader_multi_and', 'availability') + '</option>' +
             '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
             M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
             '<div class="availability-children"></div>' +
-            '<div class="availability-none">' + M.util.get_string('none', 'moodle') + '</div>' +
-            '<div class="availability-button"></div></div></div>');
+            '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
+            '<div class="clearfix m-t-1"></div>' +
+            '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
     if (!root) {
         this.node.addClass('availability-childlist');
     }
@@ -404,12 +408,12 @@ M.core_availability.List = function(json, root, parentRoot) {
         noneNode.appendChild(deleteIcon.span);
 
         // Also if it's not the root, none is actually invalid, so add a label.
-        noneNode.appendChild(Y.Node.create('<span class="label label-warning">' +
+        noneNode.appendChild(Y.Node.create('<span class="m-t-1 label label-warning">' +
                 M.util.get_string('invalid', 'availability') + '</span>'));
     }
 
     // Create the button and add it.
-    var button = Y.Node.create('<button type="button" class="btn btn-default">' +
+    var button = Y.Node.create('<button type="button" class="btn btn-default m-t-1">' +
             M.util.get_string('addrestriction', 'availability') + '</button>');
     button.on("click", function() {
         this.clickAdd();
@@ -665,7 +669,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
  */
 M.core_availability.List.prototype.clickAdd = function() {
     var content = Y.Node.create('<div>' +
-            '<ul class="list-unstyled"></ul>' +
+            '<ul class="list-unstyled container-fluid"></ul>' +
             '<div class="availability-buttons mdl-align">' +
             '<button type="button" class="btn btn-default">' + M.util.get_string('cancel', 'moodle') +
             '</button></div></div>');
@@ -681,25 +685,25 @@ M.core_availability.List.prototype.clickAdd = function() {
             continue;
         }
         // Add entry for plugin.
-        li = Y.Node.create('<li class="clearfix"></li>');
+        li = Y.Node.create('<li class="clearfix row"></li>');
         id = 'availability_addrestriction_' + type;
-        button = Y.Node.create('<button type="button" class="btn btn-default"' +
+        button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
                 'id="' + id + '">' + M.util.get_string('title', 'availability_' + type) + '</button>');
         button.on('click', this.getAddHandler(type, dialogRef), this);
         li.appendChild(button);
-        label = Y.Node.create('<label for="' + id + '">' +
+        label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
                 M.util.get_string('description', 'availability_' + type) + '</label>');
         li.appendChild(label);
         ul.appendChild(li);
     }
     // Extra entry for lists.
-    li = Y.Node.create('<li class="clearfix"></li>');
+    li = Y.Node.create('<li class="clearfix row"></li>');
     id = 'availability_addrestriction_list_';
-    button = Y.Node.create('<button type="button" class="btn btn-default"' +
+    button = Y.Node.create('<button type="button" class="btn btn-default col-xs-6"' +
             'id="' + id + '">' + M.util.get_string('condition_group', 'availability') + '</button>');
     button.on('click', this.getAddHandler(null, dialogRef), this);
     li.appendChild(button);
-    label = Y.Node.create('<label for="' + id + '">' +
+    label = Y.Node.create('<label for="' + id + '" class="col-xs-6">' +
             M.util.get_string('condition_group_info', 'availability') + '</label>');
     li.appendChild(label);
     ul.appendChild(li);
@@ -895,7 +899,7 @@ M.core_availability.Item = function(json, root) {
         this.pluginNode.addClass('availability_' + json.type);
     }
 
-    this.node = Y.Node.create('<div class="availability-item"><h3 class="accesshide"></h3></div>');
+    this.node = Y.Node.create('<div class="availability-item d-inline-block"><h3 class="accesshide"></h3></div>');
 
     // Add eye icon if required. This icon is added for root items, but may be
     // hidden depending on the selected list operator.
@@ -918,7 +922,7 @@ M.core_availability.Item = function(json, root) {
 
     // Add the invalid marker (empty).
     this.node.appendChild(document.createTextNode(' '));
-    this.node.appendChild(Y.Node.create('<span class="label label-warning"/>'));
+    this.node.appendChild(Y.Node.create('<span class="m-t-1 label label-warning"/>'));
 };
 
 /**
@@ -1046,7 +1050,7 @@ M.core_availability.Item.prototype.pluginNode = null;
  */
 M.core_availability.EyeIcon = function(individual, shown) {
     this.individual = individual;
-    this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
+    this.span = Y.Node.create('<a class="availability-eye col-form-label" href="#" role="button">');
     var icon = Y.Node.create('<img />');
     this.span.appendChild(icon);
 
@@ -1126,7 +1130,7 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
  */
 M.core_availability.DeleteIcon = function(toDelete) {
-    this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
+    this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
             M.util.get_string('delete', 'moodle') + '" role="button">');
     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
             '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 18b787dfb9667..66587b6032c32 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -221,121 +221,20 @@ fieldset.coursesearchbox label {
     display: none;
 }
 
-.availability-field {
-    select,
-    input[type=text] {
-        position: relative;
-        top: 4px;
-    }
-
-    label {
-        display: inline;
-    }
-
-    .availability-group {
-        margin-right: 8px;
-    }
-
-    .availability-item {
-        margin-bottom: 6px;
-    }
-
-    .availability-none {
-        margin-left: 20px;
-        margin-bottom: 4px;
-    }
-
-    .availability-plugincontrols {
-        padding: 2px 0 0 4px;
-        border: 1px solid $gray-lighter;
-        border-radius: 4px;
-        display: inline-block;
-        margin-right: 8px;
-    }
-    /* Eye icon in front of an item and delete icon after it. */
-    .availability-eye,
-    .availability-delete {
-        margin-right: 8px;
-    }
-    /* Hidden eye icon still takes up space. */
-    .availability-eye[aria-hidden=true] {
-        display: inline;
-        visibility: hidden;
-    }
-    /* Eye icons in front of child lists are aligned specially. */
-    .availability-list > .availability-eye img {
-        vertical-align: top;
-        margin-top: 12px;
-    }
-    /* Add button lines up with child elements. */
-    .availability-button {
-        margin-left: 15px;
-    }
-    /* Nested section is grey. */
-    .availability-childlist > .availability-inner {
-        display: inline-block;
-        border: 1px solid $gray-lighter;
-        border-radius: 4px;
-        padding: 6px;
-        margin-bottom: 6px;
-    }
-    /* Second (and more) levels of nested sections are white. */
-    .availability-childlist .availability-childlist > .availability-inner {
-        background: white;
-    }
-    /* Connecting text needs to be indented. */
-    .availability-connector {
-        margin-left: 20px;
-        margin-bottom: 6px;
-    }
-}
-
-/* Default form styling colours all text red. With availability conditions
-   this looks excessive as we show 'Invalid' markers in specific places. */
-.mform .error .availability-field {
-    color: $body-color;
-}
-
-/* This dialogue is used to add an availability condition. */
-.availability-dialogue {
-    .moodle-dialogue .moodle-dialogue-bd {
-        padding-left: 0;
-        padding-right: 0;
-        padding-bottom: 2px;
-    }
-
-    ul {
-        display: block;
-        margin: 0;
-    }
-
-    li {
-        display: block;
-        list-style-type: none;
-        padding: 0 0 4px;
-        clear: both;
-        border-bottom: 1px solid $gray-lighter;
-        margin-bottom: 4px;
-    }
-
-    ul button {
-        float: left;
-        margin-left: 1em;
-        min-width: 140px;
-        margin-top: 4px;
-    }
-
-    label {
-        margin-left: 170px;
-        margin-right: 1em;
-        margin-bottom: 0;
-    }
-
-    .availability-buttons button {
-        margin-left: 1em;
-        margin-right: 1em;
-        margin-top: 4px;
-    }
+.availability-eye {
+    clear: left;
+    float: left;
+}
+.availability-inner,
+.availability-plugincontrols {
+    float: left;
+    @include border-radius($card-border-radius);
+    border: $card-border-width solid $card-border-color;
+    padding: $card-spacer-x / 2;
+    margin-left: $card-spacer-x / 2;
+}
+.availability-field .availability-plugincontrols .availability-group select {
+    max-width: 12rem;
 }
 
 /* Custom styles for autocomplete form element */
diff --git a/theme/bootstrapbase/less/moodle/forms.less b/theme/bootstrapbase/less/moodle/forms.less
index 58d48015e777e..d74cbb9ff2939 100644
--- a/theme/bootstrapbase/less/moodle/forms.less
+++ b/theme/bootstrapbase/less/moodle/forms.less
@@ -366,6 +366,7 @@ fieldset.coursesearchbox label {
         margin-bottom: 4px;
     }
     .availability-plugincontrols {
+        min-height: 40px;
         padding: 2px 0 0 4px;
         background: none repeat scroll 0% 0% @wellBackground;
         border: 1px solid @grayLighter;
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 5f90d483847e4..69bb1b51de930 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -14217,6 +14217,7 @@ fieldset.coursesearchbox label {
   margin-bottom: 4px;
 }
 #fitem_id_availabilityconditionsjson .availability-plugincontrols {
+  min-height: 40px;
   padding: 2px 0 0 4px;
   background: none repeat scroll 0% 0% #f5f5f5;
   border: 1px solid #eee;