diff --git a/lib/editor/atto/plugins/charmap/styles.css b/lib/editor/atto/plugins/charmap/styles.css
index 0f151ecbe53..465646202bf 100644
--- a/lib/editor/atto/plugins/charmap/styles.css
+++ b/lib/editor/atto/plugins/charmap/styles.css
@@ -1,4 +1,4 @@
 .atto_charmap_selector button {
-    width: 2em;
-    padding: 0 3px;
+    width: 2.18rem;
+    margin: 0.1rem;
 }
diff --git a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js
index 30e0e370e5b..422e2d8faad 100644
--- a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js
+++ b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-debug.js
@@ -379,7 +379,7 @@ Y.namespace('M.atto_charmap').Button = Y.Base.create('button', Y.M.editor_atto.E
             '<div class="{{CSS.CHARMAP}}">' +
                 '{{#each CHARMAP}}' +
                     '{{#if this.[2]}}' +
-                    '<button class="{{../../CSS.BUTTON}}" ' +
+                    '<button class="btn btn-default btn-sm {{../../CSS.BUTTON}}" ' +
                         'aria-label="{{get_string this.[3] ../../component}}" ' +
                         'title="{{get_string this.[3] ../../component}}" ' +
                         'data-character="{{this.[0]}}" ' +
diff --git a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js
index 77b74493b3b..339dad4263a 100644
--- a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js
+++ b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button-min.js
@@ -1,2 +1,2 @@
 YUI.add("moodle-atto_charmap-button",function(e,t){var n="atto_charmap",r={BUTTON:"atto_charmap_character",CHARMAP:"atto_charmap_selector"},i=[["&nbsp;","&#160;",!0,"nobreakspace"],["&amp;","&#38;",!0,"ampersand"],["&quot;","&#34;",!0,"quotationmark"],["&#8253;","&#8253;",!0,"interrobang"],["&cent;","&#162;",!0,"centsign"],["&euro;","&#8364;",!0,"eurosign"],["&pound;","&#163;",!0,"poundsign"],["&yen;","&#165;",!0,"yensign"],["&copy;","&#169;",!0,"copyrightsign"],["&reg;","&#174;",!0,"registeredsign"],["&trade;","&#8482;",!0,"trademarksign"],["&permil;","&#8240;",!0,"permillesign"],["&micro;","&#181;",!0,"microsign"],["&middot;","&#183;",!0,"middledot"],["&bull;","&#8226;",!0,"bullet"],["&hellip;","&#8230;",!0,"threedotleader"],["&prime;","&#8242;",!0,"minutesfeet"],["&Prime;","&#8243;",!0,"secondsinches"],["&sect;","&#167;",!0,"sectionsign"],["&para;","&#182;",!0,"paragraphsign"],["&szlig;","&#223;",!0,"sharpsesszed"],["&lsaquo;","&#8249;",!0,"singleleftpointinganglequotationmark"],["&rsaquo;","&#8250;",!0,"singlerightpointinganglequotationmark"],["&laquo;","&#171;",!0,"leftpointingguillemet"],["&raquo;","&#187;",!0,"rightpointingguillemet"],["&lsquo;","&#8216;",!0,"leftsinglequotationmark"],["&rsquo;","&#8217;",!0,"rightsinglequotationmark"],["&ldquo;","&#8220;",!0,"leftdoublequotationmark"],["&rdquo;","&#8221;",!0,"rightdoublequotationmark"],["&sbquo;","&#8218;",!0,"singlelow9quotationmark"],["&bdquo;","&#8222;",!0,"doublelow9quotationmark"],["&lt;","&#60;",!0,"lessthansign"],["&gt;","&#62;",!0,"greaterthansign"],["&le;","&#8804;",!0,"lessthanorequalto"],["&ge;","&#8805;",!0,"greaterthanorequalto"],["&ndash;","&#8211;",!0,"endash"],["&mdash;","&#8212;",!0,"emdash"],["&macr;","&#175;",!0,"macron"],["&oline;","&#8254;",!0,"overline"],["&curren;","&#164;",!0,"currencysign"],["&brvbar;","&#166;",!0,"brokenbar"],["&uml;","&#168;",!0,"diaeresis"],["&iexcl;","&#161;",!0,"invertedexclamationmark"],["&iquest;","&#191;",!0,"turnedquestionmark"],["&circ;","&#710;",!0,"circumflexaccent"],["&tilde;","&#732;",!0,"smalltilde"],["&deg;","&#176;",!0,"degreesign"],["&minus;","&#8722;",!0,"minussign"],["&plusmn;","&#177;",!0,"plusminussign"],["&divide;","&#247;",!0,"divisionsign"],["&frasl;","&#8260;",!0,"fractionslash"],["&times;","&#215;",!0,"multiplicationsign"],["&sup1;","&#185;",!0,"superscriptone"],["&sup2;","&#178;",!0,"superscripttwo"],["&sup3;","&#179;",!0,"superscriptthree"],["&frac14;","&#188;",!0,"fractiononequarter"],["&frac12;","&#189;",!0,"fractiononehalf"],["&frac34;","&#190;",!0,"fractionthreequarters"],["&fnof;","&#402;",!0,"functionflorin"],["&int;","&#8747;",!0,"integral"],["&sum;","&#8721;",!0,"narysumation"],["&infin;","&#8734;",!0,"infinity"],["&radic;","&#8730;",!0,"squareroot"],["&sim;","&#8764;",!1,"similarto"],["&cong;","&#8773;",!1,"approximatelyequalto"],["&asymp;","&#8776;",!0,"almostequalto"],["&ne;","&#8800;",!0,"notequalto"],["&equiv;","&#8801;",!0,"identicalto"],["&isin;","&#8712;",!1,"elementof"],["&notin;","&#8713;",!1,"notanelementof"],["&ni;","&#8715;",!1,"containsasmember"],["&prod;","&#8719;",!0,"naryproduct"],["&and;","&#8743;",!1,"logicaland"],["&or;","&#8744;",!1,"logicalor"],["&not;","&#172;",!0,"notsign"],["&cap;","&#8745;",!0,"intersection"],["&cup;","&#8746;",!1,"union"],["&part;","&#8706;",!0,"partialdifferential"],["&forall;","&#8704;",!1,"forall"],["&exist;","&#8707;",!1,"thereexists"],["&empty;","&#8709;",!1,"diameter"],["&nabla;","&#8711;",!1,"backwarddifference"],["&lowast;","&#8727;",!1,"asteriskoperator"],["&prop;","&#8733;",!1,"proportionalto"],["&ang;","&#8736;",!1,"angle"],["&acute;","&#180;",!0,"acuteaccent"],["&cedil;","&#184;",!0,"cedilla"],["&ordf;","&#170;",!0,"feminineordinalindicator"],["&ordm;","&#186;",!0,"masculineordinalindicator"],["&dagger;","&#8224;",!0,"dagger"],["&Dagger;","&#8225;",!0,"doubledagger"],["&Agrave;","&#192;",!0,"agrave_caps"],["&Aacute;","&#193;",!0,"aacute_caps"],["&Acirc;","&#194;",!0,"acircumflex_caps"],["&Atilde;","&#195;",!0,"atilde_caps"],["&Auml;","&#196;",!0,"adiaeresis_caps"],["&Aring;","&#197;",!0,"aringabove_caps"],["&#256;","&#256;",!0,"amacron_caps"],["&AElig;","&#198;",!0,"ligatureae_caps"],["&Ccedil;","&#199;",!0,"ccedilla_caps"],["&Egrave;","&#200;",!0,"egrave_caps"],["&Eacute;","&#201;",!0,"eacute_caps"],["&Ecirc;","&#202;",!0,"ecircumflex_caps"],["&Euml;","&#203;",!0,"ediaeresis_caps"],["&#274;","&#274;",!0,"emacron_caps"],["&Igrave;","&#204;",!0,"igrave_caps"],["&Iacute;","&#205;",!0,"iacute_caps"],["&Icirc;","&#206;",!0,"icircumflex_caps"],["&Iuml;","&#207;",!0,"idiaeresis_caps"],["&#298;","&#298;",!0,"imacron_caps"],["&ETH;","&#208;",!0,"eth_caps"],["&Ntilde;","&#209;",!0,"ntilde_caps"],["&Ograve;","&#210;",!0,"ograve_caps"],["&Oacute;","&#211;",!0,"oacute_caps"],["&Ocirc;","&#212;",!0,"ocircumflex_caps"],["&Otilde;","&#213;",!0,"otilde_caps"],["&Ouml;","&#214;",!0,"odiaeresis_caps"],["&Oslash;","&#216;",!0,"oslash_caps"],["&#332;","&#332;",!0,"omacron_caps"],["&OElig;","&#338;",!0,"ligatureoe_caps"],["&Scaron;","&#352;",!0,"scaron_caps"],["&Ugrave;","&#217;",!0,"ugrave_caps"],["&Uacute;","&#218;",!0,"uacute_caps"],["&Ucirc;","&#219;",!0,"ucircumflex_caps"],["&Uuml;","&#220;",!0,"udiaeresis_caps"],["&#362;","&#362;",!0,"umacron_caps"],["&Yacute;","&#221;",!0,"yacute_caps"],["&Yuml;","&#376;",!0,"ydiaeresis_caps"],["&THORN;","&#222;",!0,"thorn_caps"],["&agrave;","&#224;",!0,"agrave"],["&aacute;","&#225;",!0,"aacute"],["&acirc;","&#226;",!0,"acircumflex"],["&atilde;","&#227;",!0,"atilde"],["&auml;","&#228;",!0,"adiaeresis"],["&aring;","&#229;",!0,"aringabove"],["&#257;","&#257;",!0,"amacron"],["&aelig;","&#230;",!0,"ligatureae"],["&ccedil;","&#231;",!0,"ccedilla"],["&egrave;","&#232;",!0,"egrave"],["&eacute;","&#233;",!0,"eacute"],["&ecirc;","&#234;",!0,"ecircumflex"],["&euml;","&#235;",!0,"ediaeresis"],["&#275;","&#275;",!0,"emacron"],["&igrave;","&#236;",!0,"igrave"],["&iacute;","&#237;",!0,"iacute"],["&icirc;","&#238;",!0,"icircumflex"],["&iuml;","&#239;",!0,"idiaeresis"],["&#299;","&#299;",!0,"imacron"
-],["&eth;","&#240;",!0,"eth"],["&ntilde;","&#241;",!0,"ntilde"],["&ograve;","&#242;",!0,"ograve"],["&oacute;","&#243;",!0,"oacute"],["&ocirc;","&#244;",!0,"ocircumflex"],["&otilde;","&#245;",!0,"otilde"],["&ouml;","&#246;",!0,"odiaeresis"],["&oslash;","&#248;",!0,"oslash"],["&#333;","&#333;",!0,"omacron"],["&oelig;","&#339;",!0,"ligatureoe"],["&scaron;","&#353;",!0,"scaron"],["&ugrave;","&#249;",!0,"ugrave"],["&uacute;","&#250;",!0,"uacute"],["&ucirc;","&#251;",!0,"ucircumflex"],["&uuml;","&#252;",!0,"udiaeresis"],["&#363;","&#363;",!0,"umacron"],["&yacute;","&#253;",!0,"yacute"],["&thorn;","&#254;",!0,"thorn"],["&yuml;","&#255;",!0,"ydiaeresis"],["&Alpha;","&#913;",!0,"alpha_caps"],["&Beta;","&#914;",!0,"beta_caps"],["&Gamma;","&#915;",!0,"gamma_caps"],["&Delta;","&#916;",!0,"delta_caps"],["&Epsilon;","&#917;",!0,"epsilon_caps"],["&Zeta;","&#918;",!0,"zeta_caps"],["&Eta;","&#919;",!0,"eta_caps"],["&Theta;","&#920;",!0,"theta_caps"],["&Iota;","&#921;",!0,"iota_caps"],["&Kappa;","&#922;",!0,"kappa_caps"],["&Lambda;","&#923;",!0,"lambda_caps"],["&Mu;","&#924;",!0,"mu_caps"],["&Nu;","&#925;",!0,"nu_caps"],["&Xi;","&#926;",!0,"xi_caps"],["&Omicron;","&#927;",!0,"omicron_caps"],["&Pi;","&#928;",!0,"pi_caps"],["&Rho;","&#929;",!0,"rho_caps"],["&Sigma;","&#931;",!0,"sigma_caps"],["&Tau;","&#932;",!0,"tau_caps"],["&Upsilon;","&#933;",!0,"upsilon_caps"],["&Phi;","&#934;",!0,"phi_caps"],["&Chi;","&#935;",!0,"chi_caps"],["&Psi;","&#936;",!0,"psi_caps"],["&Omega;","&#937;",!0,"omega_caps"],["&alpha;","&#945;",!0,"alpha"],["&beta;","&#946;",!0,"beta"],["&gamma;","&#947;",!0,"gamma"],["&delta;","&#948;",!0,"delta"],["&epsilon;","&#949;",!0,"epsilon"],["&zeta;","&#950;",!0,"zeta"],["&eta;","&#951;",!0,"eta"],["&theta;","&#952;",!0,"theta"],["&iota;","&#953;",!0,"iota"],["&kappa;","&#954;",!0,"kappa"],["&lambda;","&#955;",!0,"lambda"],["&mu;","&#956;",!0,"mu"],["&nu;","&#957;",!0,"nu"],["&xi;","&#958;",!0,"xi"],["&omicron;","&#959;",!0,"omicron"],["&pi;","&#960;",!0,"pi"],["&rho;","&#961;",!0,"rho"],["&sigmaf;","&#962;",!0,"finalsigma"],["&sigma;","&#963;",!0,"sigma"],["&tau;","&#964;",!0,"tau"],["&upsilon;","&#965;",!0,"upsilon"],["&phi;","&#966;",!0,"phi"],["&chi;","&#967;",!0,"chi"],["&psi;","&#968;",!0,"psi"],["&omega;","&#969;",!0,"omega"],["&alefsym;","&#8501;",!1,"alefsymbol"],["&piv;","&#982;",!1,"pisymbol"],["&real;","&#8476;",!1,"realpartsymbol"],["&thetasym;","&#977;",!1,"thetasymbol"],["&upsih;","&#978;",!1,"upsilonhooksymbol"],["&weierp;","&#8472;",!1,"weierstrassp"],["&image;","&#8465;",!1,"imaginarypart"],["&larr;","&#8592;",!0,"leftwardsarrow"],["&uarr;","&#8593;",!0,"upwardsarrow"],["&rarr;","&#8594;",!0,"rightwardsarrow"],["&darr;","&#8595;",!0,"downwardsarrow"],["&harr;","&#8596;",!0,"leftrightarrow"],["&crarr;","&#8629;",!1,"carriagereturn"],["&lArr;","&#8656;",!1,"leftwardsdoublearrow"],["&uArr;","&#8657;",!1,"upwardsdoublearrow"],["&rArr;","&#8658;",!1,"rightwardsdoublearrow"],["&dArr;","&#8659;",!1,"downwardsdoublearrow"],["&hArr;","&#8660;",!1,"leftrightdoublearrow"],["&there4;","&#8756;",!1,"therefore"],["&sub;","&#8834;",!1,"subsetof"],["&sup;","&#8835;",!1,"supersetof"],["&nsub;","&#8836;",!1,"notasubsetof"],["&sube;","&#8838;",!1,"subsetoforequalto"],["&supe;","&#8839;",!1,"supersetoforequalto"],["&oplus;","&#8853;",!1,"circledplus"],["&otimes;","&#8855;",!1,"circledtimes"],["&perp;","&#8869;",!1,"perpendicular"],["&sdot;","&#8901;",!1,"dotoperator"],["&lceil;","&#8968;",!1,"leftceiling"],["&rceil;","&#8969;",!1,"rightceiling"],["&lfloor;","&#8970;",!1,"leftfloor"],["&rfloor;","&#8971;",!1,"rightfloor"],["&lang;","&#9001;",!1,"leftpointinganglebracket"],["&rang;","&#9002;",!1,"rightpointinganglebracket"],["&loz;","&#9674;",!0,"lozenge"],["&spades;","&#9824;",!0,"blackspadesuit"],["&clubs;","&#9827;",!0,"blackclubsuit"],["&hearts;","&#9829;",!0,"blackheartsuit"],["&diams;","&#9830;",!0,"blackdiamondsuit"],["&ensp;","&#8194;",!1,"enspace"],["&emsp;","&#8195;",!1,"emspace"],["&thinsp;","&#8201;",!1,"thinspace"],["&zwnj;","&#8204;",!1,"zerowidthnonjoiner"],["&zwj;","&#8205;",!1,"zerowidthjoiner"],["&lrm;","&#8206;",!1,"lefttorightmark"],["&rlm;","&#8207;",!1,"righttoleftmark"],["&shy;","&#173;",!1,"softhyphen"]];e.namespace("M.atto_charmap").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,initializer:function(){this.addButton({icon:"e/special_character",callback:this._displayDialogue})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("insertcharacter",n),focusAfterHide:!0},!0);e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Handlebars.compile('<div class="{{CSS.CHARMAP}}">{{#each CHARMAP}}{{#if this.[2]}}<button class="{{../../CSS.BUTTON}}" aria-label="{{get_string this.[3] ../../component}}" title="{{get_string this.[3] ../../component}}" data-character="{{this.[0]}}" >{{{this.[0]}}}</button>{{/if}}{{/each}}</div>'),s=e.Node.create(t({component:n,CSS:r,CHARMAP:i}));return s.delegate("click",this._insertChar,"."+r.BUTTON,this),s},_insertChar:function(e){var t=e.target.getData("character");this.getDialogue({focusAfterHide:null}).hide();var n=this.get("host");n.setSelection(this._currentSelection),n.insertContentAtFocusPoint(t),this.markUpdated()}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+],["&eth;","&#240;",!0,"eth"],["&ntilde;","&#241;",!0,"ntilde"],["&ograve;","&#242;",!0,"ograve"],["&oacute;","&#243;",!0,"oacute"],["&ocirc;","&#244;",!0,"ocircumflex"],["&otilde;","&#245;",!0,"otilde"],["&ouml;","&#246;",!0,"odiaeresis"],["&oslash;","&#248;",!0,"oslash"],["&#333;","&#333;",!0,"omacron"],["&oelig;","&#339;",!0,"ligatureoe"],["&scaron;","&#353;",!0,"scaron"],["&ugrave;","&#249;",!0,"ugrave"],["&uacute;","&#250;",!0,"uacute"],["&ucirc;","&#251;",!0,"ucircumflex"],["&uuml;","&#252;",!0,"udiaeresis"],["&#363;","&#363;",!0,"umacron"],["&yacute;","&#253;",!0,"yacute"],["&thorn;","&#254;",!0,"thorn"],["&yuml;","&#255;",!0,"ydiaeresis"],["&Alpha;","&#913;",!0,"alpha_caps"],["&Beta;","&#914;",!0,"beta_caps"],["&Gamma;","&#915;",!0,"gamma_caps"],["&Delta;","&#916;",!0,"delta_caps"],["&Epsilon;","&#917;",!0,"epsilon_caps"],["&Zeta;","&#918;",!0,"zeta_caps"],["&Eta;","&#919;",!0,"eta_caps"],["&Theta;","&#920;",!0,"theta_caps"],["&Iota;","&#921;",!0,"iota_caps"],["&Kappa;","&#922;",!0,"kappa_caps"],["&Lambda;","&#923;",!0,"lambda_caps"],["&Mu;","&#924;",!0,"mu_caps"],["&Nu;","&#925;",!0,"nu_caps"],["&Xi;","&#926;",!0,"xi_caps"],["&Omicron;","&#927;",!0,"omicron_caps"],["&Pi;","&#928;",!0,"pi_caps"],["&Rho;","&#929;",!0,"rho_caps"],["&Sigma;","&#931;",!0,"sigma_caps"],["&Tau;","&#932;",!0,"tau_caps"],["&Upsilon;","&#933;",!0,"upsilon_caps"],["&Phi;","&#934;",!0,"phi_caps"],["&Chi;","&#935;",!0,"chi_caps"],["&Psi;","&#936;",!0,"psi_caps"],["&Omega;","&#937;",!0,"omega_caps"],["&alpha;","&#945;",!0,"alpha"],["&beta;","&#946;",!0,"beta"],["&gamma;","&#947;",!0,"gamma"],["&delta;","&#948;",!0,"delta"],["&epsilon;","&#949;",!0,"epsilon"],["&zeta;","&#950;",!0,"zeta"],["&eta;","&#951;",!0,"eta"],["&theta;","&#952;",!0,"theta"],["&iota;","&#953;",!0,"iota"],["&kappa;","&#954;",!0,"kappa"],["&lambda;","&#955;",!0,"lambda"],["&mu;","&#956;",!0,"mu"],["&nu;","&#957;",!0,"nu"],["&xi;","&#958;",!0,"xi"],["&omicron;","&#959;",!0,"omicron"],["&pi;","&#960;",!0,"pi"],["&rho;","&#961;",!0,"rho"],["&sigmaf;","&#962;",!0,"finalsigma"],["&sigma;","&#963;",!0,"sigma"],["&tau;","&#964;",!0,"tau"],["&upsilon;","&#965;",!0,"upsilon"],["&phi;","&#966;",!0,"phi"],["&chi;","&#967;",!0,"chi"],["&psi;","&#968;",!0,"psi"],["&omega;","&#969;",!0,"omega"],["&alefsym;","&#8501;",!1,"alefsymbol"],["&piv;","&#982;",!1,"pisymbol"],["&real;","&#8476;",!1,"realpartsymbol"],["&thetasym;","&#977;",!1,"thetasymbol"],["&upsih;","&#978;",!1,"upsilonhooksymbol"],["&weierp;","&#8472;",!1,"weierstrassp"],["&image;","&#8465;",!1,"imaginarypart"],["&larr;","&#8592;",!0,"leftwardsarrow"],["&uarr;","&#8593;",!0,"upwardsarrow"],["&rarr;","&#8594;",!0,"rightwardsarrow"],["&darr;","&#8595;",!0,"downwardsarrow"],["&harr;","&#8596;",!0,"leftrightarrow"],["&crarr;","&#8629;",!1,"carriagereturn"],["&lArr;","&#8656;",!1,"leftwardsdoublearrow"],["&uArr;","&#8657;",!1,"upwardsdoublearrow"],["&rArr;","&#8658;",!1,"rightwardsdoublearrow"],["&dArr;","&#8659;",!1,"downwardsdoublearrow"],["&hArr;","&#8660;",!1,"leftrightdoublearrow"],["&there4;","&#8756;",!1,"therefore"],["&sub;","&#8834;",!1,"subsetof"],["&sup;","&#8835;",!1,"supersetof"],["&nsub;","&#8836;",!1,"notasubsetof"],["&sube;","&#8838;",!1,"subsetoforequalto"],["&supe;","&#8839;",!1,"supersetoforequalto"],["&oplus;","&#8853;",!1,"circledplus"],["&otimes;","&#8855;",!1,"circledtimes"],["&perp;","&#8869;",!1,"perpendicular"],["&sdot;","&#8901;",!1,"dotoperator"],["&lceil;","&#8968;",!1,"leftceiling"],["&rceil;","&#8969;",!1,"rightceiling"],["&lfloor;","&#8970;",!1,"leftfloor"],["&rfloor;","&#8971;",!1,"rightfloor"],["&lang;","&#9001;",!1,"leftpointinganglebracket"],["&rang;","&#9002;",!1,"rightpointinganglebracket"],["&loz;","&#9674;",!0,"lozenge"],["&spades;","&#9824;",!0,"blackspadesuit"],["&clubs;","&#9827;",!0,"blackclubsuit"],["&hearts;","&#9829;",!0,"blackheartsuit"],["&diams;","&#9830;",!0,"blackdiamondsuit"],["&ensp;","&#8194;",!1,"enspace"],["&emsp;","&#8195;",!1,"emspace"],["&thinsp;","&#8201;",!1,"thinspace"],["&zwnj;","&#8204;",!1,"zerowidthnonjoiner"],["&zwj;","&#8205;",!1,"zerowidthjoiner"],["&lrm;","&#8206;",!1,"lefttorightmark"],["&rlm;","&#8207;",!1,"righttoleftmark"],["&shy;","&#173;",!1,"softhyphen"]];e.namespace("M.atto_charmap").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,initializer:function(){this.addButton({icon:"e/special_character",callback:this._displayDialogue})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("insertcharacter",n),focusAfterHide:!0},!0);e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Handlebars.compile('<div class="{{CSS.CHARMAP}}">{{#each CHARMAP}}{{#if this.[2]}}<button class="btn btn-default btn-sm {{../../CSS.BUTTON}}" aria-label="{{get_string this.[3] ../../component}}" title="{{get_string this.[3] ../../component}}" data-character="{{this.[0]}}" >{{{this.[0]}}}</button>{{/if}}{{/each}}</div>'),s=e.Node.create(t({component:n,CSS:r,CHARMAP:i}));return s.delegate("click",this._insertChar,"."+r.BUTTON,this),s},_insertChar:function(e){var t=e.target.getData("character");this.getDialogue({focusAfterHide:null}).hide();var n=this.get("host");n.setSelection(this._currentSelection),n.insertContentAtFocusPoint(t),this.markUpdated()}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
diff --git a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js
index 30e0e370e5b..422e2d8faad 100644
--- a/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js
+++ b/lib/editor/atto/plugins/charmap/yui/build/moodle-atto_charmap-button/moodle-atto_charmap-button.js
@@ -379,7 +379,7 @@ Y.namespace('M.atto_charmap').Button = Y.Base.create('button', Y.M.editor_atto.E
             '<div class="{{CSS.CHARMAP}}">' +
                 '{{#each CHARMAP}}' +
                     '{{#if this.[2]}}' +
-                    '<button class="{{../../CSS.BUTTON}}" ' +
+                    '<button class="btn btn-default btn-sm {{../../CSS.BUTTON}}" ' +
                         'aria-label="{{get_string this.[3] ../../component}}" ' +
                         'title="{{get_string this.[3] ../../component}}" ' +
                         'data-character="{{this.[0]}}" ' +
diff --git a/lib/editor/atto/plugins/charmap/yui/src/button/js/button.js b/lib/editor/atto/plugins/charmap/yui/src/button/js/button.js
index 6f549b4e331..397f1fe20f7 100644
--- a/lib/editor/atto/plugins/charmap/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/charmap/yui/src/button/js/button.js
@@ -377,7 +377,7 @@ Y.namespace('M.atto_charmap').Button = Y.Base.create('button', Y.M.editor_atto.E
             '<div class="{{CSS.CHARMAP}}">' +
                 '{{#each CHARMAP}}' +
                     '{{#if this.[2]}}' +
-                    '<button class="{{../../CSS.BUTTON}}" ' +
+                    '<button class="btn btn-default btn-sm {{../../CSS.BUTTON}}" ' +
                         'aria-label="{{get_string this.[3] ../../component}}" ' +
                         'title="{{get_string this.[3] ../../component}}" ' +
                         'data-character="{{this.[0]}}" ' +
diff --git a/lib/editor/atto/plugins/equation/styles.css b/lib/editor/atto/plugins/equation/styles.css
index f6081a05239..8df2d6bc67e 100644
--- a/lib/editor/atto/plugins/equation/styles.css
+++ b/lib/editor/atto/plugins/equation/styles.css
@@ -1,16 +1,3 @@
-.atto_equation_library .yui3-tabview-list {
-    border: none;
-}
-
-.atto_equation_library .yui3-tab-selected .yui3-tab-label,
-.yui3-skin-sam #atto_equation_library .yui3-tab-selected .yui3-tab-label:focus,
-.yui3-skin-sam #atto_equation_library .yui3-tab-selected .yui3-tab-label:hover {
-    background: none;
-    color: black;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-}
-
 .atto_equation_library button {
     margin: 0.25%;
     min-width: 12%;
diff --git a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js
index ae1d92c464c..fdc94ce1ff9 100644
--- a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js
+++ b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js
@@ -62,29 +62,34 @@ var COMPONENTNAME = 'atto_equation',
                 '<textarea class="fullwidth {{CSS.EQUATION_TEXT}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/>' +
                 '<label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label>' +
-                '<div describedby="{{elementid}}_cursorinfo" class="well well-small fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
+                '<div describedby="{{elementid}}_cursorinfo" class="well well-small p-1 fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div>' +
                 '<div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="{{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
+                    '<button class="btn btn-default {{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
                 '</div>' +
             '</form>',
         LIBRARY: '' +
             '<div class="{{CSS.LIBRARY}}">' +
-                '<ul>' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '{{#each library}}' +
-                        '<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
-                            '{{get_string groupname ../component}}' +
-                        '</a></li>' +
+                        '<li  class="nav-item">' +
+                            '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' role="tab" data-toggle="tab">' +
+                                '{{get_string groupname ../component}}' +
+                            '</a>' +
+                        '</li>' +
                     '{{/each}}' +
                 '</ul>' +
-                '<div class="{{CSS.LIBRARY_GROUPS}}">' +
+                '<div class="tab-content m-b-1 {{CSS.LIBRARY_GROUPS}}">' +
                     '{{#each library}}' +
-                        '<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+                        '<div data-medium-type="{{CSS.LINK}}" class="tab-pane" ' +
+                        'id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
                             '<div role="toolbar">' +
                             '{{#split "\n" elements}}' +
-                                '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">' +
+                                '<button class="btn btn-default" tabindex="-1" data-tex="{{this}}"' +
+                                    'aria-label="{{this}}" title="{{this}}">' +
                                     '{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}' +
                                 '</button>' +
                             '{{/split}}' +
@@ -222,13 +227,8 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         var content = this._getDialogueContent();
         dialogue.set('bodyContent', content);
 
-        var library = content.one(SELECTORS.LIBRARY);
+        content.one('.nav-item:first-child .nav-link').getDOMNode().click();
 
-        var tabview = new Y.TabView({
-            srcNode: library
-        });
-
-        tabview.render();
         dialogue.show();
         // Notify the filters about the modified nodes.
         require(['core/event'], function(event) {
diff --git a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js
index a5ff287f15e..00d07818548 100644
--- a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js
+++ b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-min.js
@@ -1,2 +1,2 @@
-YUI.add("moodle-atto_equation-button",function(e,t){var n="atto_equation",r="atto_equation",i={EQUATION_TEXT:"atto_equation_equation",EQUATION_PREVIEW:"atto_equation_preview",SUBMIT:"atto_equation_submit",LIBRARY:"atto_equation_library",LIBRARY_GROUPS:"atto_equation_groups",LIBRARY_GROUP_PREFIX:"atto_equation_group"},s={LIBRARY:"."+i.LIBRARY,LIBRARY_GROUP:"."+i.LIBRARY_GROUPS+" > div > div",EQUATION_TEXT:"."+i.EQUATION_TEXT,EQUATION_PREVIEW:"."+i.EQUATION_PREVIEW,SUBMIT:"."+i.SUBMIT,LIBRARY_BUTTON:"."+i.LIBRARY+" button"},o={START:"\\(",END:"\\)"},u={FORM:'<form class="atto_form">{{{library}}}<label for="{{elementid}}_{{CSS.EQUATION_TEXT}}">{{{get_string "editequation" component texdocsurl}}}</label><textarea class="fullwidth {{CSS.EQUATION_TEXT}}" id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/><label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label><div describedby="{{elementid}}_cursorinfo" class="well well-small fullwidth {{CSS.EQUATION_PREVIEW}}" id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div><div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div><div class="mdl-align"><br/><button class="{{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button></div></form>',LIBRARY:'<div class="{{CSS.LIBRARY}}"><ul>{{#each library}}<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">{{get_string groupname ../component}}</a></li>{{/each}}</ul><div class="{{CSS.LIBRARY_GROUPS}}">{{#each library}}<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"><div role="toolbar">{{#split "\n" elements}}<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}</button>{{/split}}</div></div>{{/each}}</div></div>'};e.namespace("M.atto_equation").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_lastCursorPos:0,_content:null,_sourceEquation:null,_groupFocus:null,_equationPatterns:[/\$\$([\S\s]+?)\$\$/,/\\\(([\S\s]+?)\\\)/,/\\\[([\S\s]+?)\\\]/,/\[tex\]([\S\s]+?)\[\/tex\]/],initializer:function(){this._groupFocus={},this.get("texfilteractive")&&(this.addButton({icon:"e/math",callback:this._displayDialogue}),this.get("host").on("atto:selectionchanged",function(){this._resolveEquation()?this.highlightButtons():this.unHighlightButtons()},this),this.editor.all("tex").each(function(t){var n=e.Node.create("<span>"+o.START+" "+t.get("text")+" "+o.END+"</span>");t.replace(n)}))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var t=this._resolveEquation(),r=this.getDialogue({headerContent:M.util.get_string("pluginname",n),focusAfterHide:!0,width:600,focusOnShowSelector:s.EQUATION_TEXT}),i=this._getDialogueContent();r.set("bodyContent",i);var o=i.one(s.LIBRARY),u=new e.TabView({srcNode:o});u.render(),r.show(),require(["core/event"],function(e){e.notifyFilterContentUpdated(r.get("boundingBox").getDOMNode())}),t&&i.one(s.EQUATION_TEXT).set("text",t),this._updatePreview(!1)},_resolveEquation:function(){var t=this.get("host").getSelectionParentNode(),n=this.get("host").getSelection(),r,i=!1;return this.get("host").isActive()?t?!n||n.length===0?!1:(this.sourceEquation=null,n=n[0],r=e.one(t).get("text"),e.Array.find(this._equationPatterns,function(t){var s=r.match(new RegExp(t.source,"g"));if(s&&s.length)return e.Array.find(s,function(e){var s=0;while(r.indexOf(e,s)!==-1){var o=r.indexOf(e,s),u=o+e.length,a=n.startOffset>=o&&n.startOffset<u,f=n.endOffset<=u&&n.endOffset>o;if(a&&f){var l=e.match(t);if(l&&l.length){var c=r.indexOf(l[1],o),h=c+l[1].length;return i=l[1],this.sourceEquation={startOuterPosition:o,endOuterPosition:u,outerMatch:e,startInnerPosition:c,endInnerPosition:h,innerMatch:l},!0}}s=u}},this)},this),i!==!1&&(i=i.trim()),i):!1:!1},_setEquation:function(t){var n,r,i,s,u,a;u=this.get("host"),t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(".atto_form").one("textarea"),s=n.get("value"),s!==""&&(u.setSelection(this._currentSelection),this.sourceEquation?(r=e.one(u.getSelectionParentNode()),i=r.get("text"),s=" "+s+" ",a=i.slice(0,this.sourceEquation.startInnerPosition)+s+i.slice(this.sourceEquation.endInnerPosition),r.set("text",a)):(s=o.START+" "+s+" "+o.END,u.insertContentAtFocusPoint(s)),this.markUpdated())},_throttle:function(e,t){var n=null;return function(){var r=this,i=arguments;clearTimeout(n),n=setTimeout(function(){e.apply(r,i)},t)}},_updatePreview:function(t){var n=this._content.one(s.EQUATION_TEXT),r=n.get("value"),i,u=n.get("selectionStart"),a="",f="\\Downarrow ",l,c;t&&t.preventDefault(),u||(u=0);while(r.charAt(u)==="\\"&&u>=0)u-=1;l=/[a-zA-Z\{]/;if(u!==0&&r.charAt(u-1)!="{")while(l.test(r.charAt(u))&&u<r.length&&l.test(r.charAt(u-1)))u+=1;this._lastCursorPos=u,r=a+r.substring(0,u)+f+r.substring(u),r=o.START+" "+r+" "+o.END,i=M.cfg.wwwroot+"/lib/editor/atto/plugins/equation/ajax.php",c={sesskey:M.cfg.sesskey,contextid:this.get("contextid"),action:"filtertext",text:r},e.io(i,{context:this,data:c,timeout:500,on:{complete:this._loadPreview}})},_loadPreview:function(e,t){var n=this._content.one(s.EQUATION_PREVIEW);t.status===200&&(n.setHTML(t.responseText),require(["core/event"],function(e){e.notifyFilterContentUpdated(n.getDOMNode())}))},_getDialogueContent:function(){var t=this._getLibraryContent(),r=this._throttle(this._updatePreview,500),o=e.Handlebars.compile(u.FORM);return this._content=e.Node.create(o({elementid:this.get("host").get("elementid"),component:n,library:t,texdocsurl:this.get("texdocsurl"),CSS:i})),this._content.all(s.LIBRARY_GROUP).each(function(e){this._setGroupTabFocus(e,e.one("button")),e.all("button a").setAttribute("tabindex","-1")},this),this._content.delegate("key",this._groupNavigation,"down:37,39",s.LIBRARY_BUTTON,this),this._content.one(s.SUBMIT).on("click",this._setEquation,this),this._content.one(s.EQUATION_TEXT).on("valuechange"
-,r,this),this._content.one(s.EQUATION_TEXT).on("mouseup",r,this),this._content.one(s.EQUATION_TEXT).on("keyup",r,this),this._content.delegate("click",this._selectLibraryItem,s.LIBRARY_BUTTON,this),this._content},_groupNavigation:function(e){e.preventDefault();var t=e.currentTarget,n=t.get("parentNode"),r=n.all("button"),i=e.keyCode!==37?1:-1,s=r.indexOf(t),o;s<0&&(s=0),s+=i,s<0?s=r.size()-1:s>=r.size()&&(s=0),o=r.item(s),this._setGroupTabFocus(n,o),o.focus()},_setGroupTabFocus:function(e,t){var n=e.generateID();typeof this._groupFocus[n]!="undefined"&&this._groupFocus[n].setAttribute("tabindex","-1"),this._groupFocus[n]=t,t.setAttribute("tabindex",0),e.setAttribute("aria-activedescendant",t.generateID())},_selectLibraryItem:function(e){var t=e.currentTarget.getAttribute("data-tex"),n,r,i,s=0;e.preventDefault(),this._setGroupTabFocus(e.currentTarget.get("parentNode"),e.currentTarget),i=e.currentTarget.ancestor(".atto_form").one("textarea"),n=i.get("value"),r=n.substring(0,this._lastCursorPos),r.charAt(r.length-1)!==" "&&(r+=" "),r+=t,s=r.length,n.charAt(this._lastCursorPos)!==" "&&(r+=" "),r+=n.substring(this._lastCursorPos,n.length),i.set("value",r),i.focus();var o=i.getDOMNode();if(typeof o.selectionStart=="number")o.selectionStart=o.selectionEnd=s;else if(typeof o.createTextRange!="undefined"){var u=o.createTextRange();u.moveToPoint(s),u.select()}this._updatePreview(!1)},_getLibraryContent:function(){var t=e.Handlebars.compile(u.LIBRARY),r=this.get("library"),s="";e.Handlebars.registerHelper("split",function(e,t,n){var r,i,s;if(typeof e=="undefined"||typeof t=="undefined")return"";s="",r=t.trim().split(e);while(r.length>0)i=r.shift().trim(),s+=n.fn(i);return s}),s=t({elementid:this.get("host").get("elementid"),component:n,library:r,CSS:i,DELIMITERS:o});var a=M.cfg.wwwroot+"/lib/editor/atto/plugins/equation/ajax.php",f={sesskey:M.cfg.sesskey,contextid:this.get("contextid"),action:"filtertext",text:s},l=e.io(a,{sync:!0,data:f,method:"POST"});return l.status===200&&(s=l.responseText),s}},{ATTRS:{texfilteractive:{value:!1},contextid:{value:null},library:{value:{}},texdocsurl:{value:null}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-core-event","io","event-valuechange","tabview","array-extras"]});
+YUI.add("moodle-atto_equation-button",function(e,t){var n="atto_equation",r="atto_equation",i={EQUATION_TEXT:"atto_equation_equation",EQUATION_PREVIEW:"atto_equation_preview",SUBMIT:"atto_equation_submit",LIBRARY:"atto_equation_library",LIBRARY_GROUPS:"atto_equation_groups",LIBRARY_GROUP_PREFIX:"atto_equation_group"},s={LIBRARY:"."+i.LIBRARY,LIBRARY_GROUP:"."+i.LIBRARY_GROUPS+" > div > div",EQUATION_TEXT:"."+i.EQUATION_TEXT,EQUATION_PREVIEW:"."+i.EQUATION_PREVIEW,SUBMIT:"."+i.SUBMIT,LIBRARY_BUTTON:"."+i.LIBRARY+" button"},o={START:"\\(",END:"\\)"},u={FORM:'<form class="atto_form">{{{library}}}<label for="{{elementid}}_{{CSS.EQUATION_TEXT}}">{{{get_string "editequation" component texdocsurl}}}</label><textarea class="fullwidth {{CSS.EQUATION_TEXT}}" id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/><label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label><div describedby="{{elementid}}_cursorinfo" class="well well-small p-1 fullwidth {{CSS.EQUATION_PREVIEW}}" id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div><div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div><div class="mdl-align"><br/><button class="btn btn-default {{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button></div></form>',LIBRARY:'<div class="{{CSS.LIBRARY}}"><ul class="root nav nav-tabs m-b-1" role="tablist">{{#each library}}<li  class="nav-item"><a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"  role="tab" data-toggle="tab">{{get_string groupname ../component}}</a></li>{{/each}}</ul><div class="tab-content m-b-1 {{CSS.LIBRARY_GROUPS}}">{{#each library}}<div data-medium-type="{{CSS.LINK}}" class="tab-pane" id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"><div role="toolbar">{{#split "\n" elements}}<button class="btn btn-default" tabindex="-1" data-tex="{{this}}"aria-label="{{this}}" title="{{this}}">{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}</button>{{/split}}</div></div>{{/each}}</div></div>'};e.namespace("M.atto_equation").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_lastCursorPos:0,_content:null,_sourceEquation:null,_groupFocus:null,_equationPatterns:[/\$\$([\S\s]+?)\$\$/,/\\\(([\S\s]+?)\\\)/,/\\\[([\S\s]+?)\\\]/,/\[tex\]([\S\s]+?)\[\/tex\]/],initializer:function(){this._groupFocus={},this.get("texfilteractive")&&(this.addButton({icon:"e/math",callback:this._displayDialogue}),this.get("host").on("atto:selectionchanged",function(){this._resolveEquation()?this.highlightButtons():this.unHighlightButtons()},this),this.editor.all("tex").each(function(t){var n=e.Node.create("<span>"+o.START+" "+t.get("text")+" "+o.END+"</span>");t.replace(n)}))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this._resolveEquation(),t=this.getDialogue({headerContent:M.util.get_string("pluginname",n),focusAfterHide:!0,width:600,focusOnShowSelector:s.EQUATION_TEXT}),r=this._getDialogueContent();t.set("bodyContent",r),r.one(".nav-item:first-child .nav-link").getDOMNode().click(),t.show(),require(["core/event"],function(e){e.notifyFilterContentUpdated(t.get("boundingBox").getDOMNode())}),e&&r.one(s.EQUATION_TEXT).set("text",e),this._updatePreview(!1)},_resolveEquation:function(){var t=this.get("host").getSelectionParentNode(),n=this.get("host").getSelection(),r,i=!1;return this.get("host").isActive()?t?!n||n.length===0?!1:(this.sourceEquation=null,n=n[0],r=e.one(t).get("text"),e.Array.find(this._equationPatterns,function(t){var s=r.match(new RegExp(t.source,"g"));if(s&&s.length)return e.Array.find(s,function(e){var s=0;while(r.indexOf(e,s)!==-1){var o=r.indexOf(e,s),u=o+e.length,a=n.startOffset>=o&&n.startOffset<u,f=n.endOffset<=u&&n.endOffset>o;if(a&&f){var l=e.match(t);if(l&&l.length){var c=r.indexOf(l[1],o),h=c+l[1].length;return i=l[1],this.sourceEquation={startOuterPosition:o,endOuterPosition:u,outerMatch:e,startInnerPosition:c,endInnerPosition:h,innerMatch:l},!0}}s=u}},this)},this),i!==!1&&(i=i.trim()),i):!1:!1},_setEquation:function(t){var n,r,i,s,u,a;u=this.get("host"),t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(".atto_form").one("textarea"),s=n.get("value"),s!==""&&(u.setSelection(this._currentSelection),this.sourceEquation?(r=e.one(u.getSelectionParentNode()),i=r.get("text"),s=" "+s+" ",a=i.slice(0,this.sourceEquation.startInnerPosition)+s+i.slice(this.sourceEquation.endInnerPosition),r.set("text",a)):(s=o.START+" "+s+" "+o.END,u.insertContentAtFocusPoint(s)),this.markUpdated())},_throttle:function(e,t){var n=null;return function(){var r=this,i=arguments;clearTimeout(n),n=setTimeout(function(){e.apply(r,i)},t)}},_updatePreview:function(t){var n=this._content.one(s.EQUATION_TEXT),r=n.get("value"),i,u=n.get("selectionStart"),a="",f="\\Downarrow ",l,c;t&&t.preventDefault(),u||(u=0);while(r.charAt(u)==="\\"&&u>=0)u-=1;l=/[a-zA-Z\{]/;if(u!==0&&r.charAt(u-1)!="{")while(l.test(r.charAt(u))&&u<r.length&&l.test(r.charAt(u-1)))u+=1;this._lastCursorPos=u,r=a+r.substring(0,u)+f+r.substring(u),r=o.START+" "+r+" "+o.END,i=M.cfg.wwwroot+"/lib/editor/atto/plugins/equation/ajax.php",c={sesskey:M.cfg.sesskey,contextid:this.get("contextid"),action:"filtertext",text:r},e.io(i,{context:this,data:c,timeout:500,on:{complete:this._loadPreview}})},_loadPreview:function(e,t){var n=this._content.one(s.EQUATION_PREVIEW);t.status===200&&(n.setHTML(t.responseText),require(["core/event"],function(e){e.notifyFilterContentUpdated(n.getDOMNode())}))},_getDialogueContent:function(){var t=this._getLibraryContent(),r=this._throttle(this._updatePreview,500),o=e.Handlebars.compile(u.FORM);return this._content=e.Node.create(o({elementid:this.get("host").get("elementid"),component:n,library:t,texdocsurl:this.get("texdocsurl"),CSS:i})),this._content.all(s.LIBRARY_GROUP).each(function(e){this._setGroupTabFocus(e,e.one("button")),e.all("button a").setAttribute("tabindex"
+,"-1")},this),this._content.delegate("key",this._groupNavigation,"down:37,39",s.LIBRARY_BUTTON,this),this._content.one(s.SUBMIT).on("click",this._setEquation,this),this._content.one(s.EQUATION_TEXT).on("valuechange",r,this),this._content.one(s.EQUATION_TEXT).on("mouseup",r,this),this._content.one(s.EQUATION_TEXT).on("keyup",r,this),this._content.delegate("click",this._selectLibraryItem,s.LIBRARY_BUTTON,this),this._content},_groupNavigation:function(e){e.preventDefault();var t=e.currentTarget,n=t.get("parentNode"),r=n.all("button"),i=e.keyCode!==37?1:-1,s=r.indexOf(t),o;s<0&&(s=0),s+=i,s<0?s=r.size()-1:s>=r.size()&&(s=0),o=r.item(s),this._setGroupTabFocus(n,o),o.focus()},_setGroupTabFocus:function(e,t){var n=e.generateID();typeof this._groupFocus[n]!="undefined"&&this._groupFocus[n].setAttribute("tabindex","-1"),this._groupFocus[n]=t,t.setAttribute("tabindex",0),e.setAttribute("aria-activedescendant",t.generateID())},_selectLibraryItem:function(e){var t=e.currentTarget.getAttribute("data-tex"),n,r,i,s=0;e.preventDefault(),this._setGroupTabFocus(e.currentTarget.get("parentNode"),e.currentTarget),i=e.currentTarget.ancestor(".atto_form").one("textarea"),n=i.get("value"),r=n.substring(0,this._lastCursorPos),r.charAt(r.length-1)!==" "&&(r+=" "),r+=t,s=r.length,n.charAt(this._lastCursorPos)!==" "&&(r+=" "),r+=n.substring(this._lastCursorPos,n.length),i.set("value",r),i.focus();var o=i.getDOMNode();if(typeof o.selectionStart=="number")o.selectionStart=o.selectionEnd=s;else if(typeof o.createTextRange!="undefined"){var u=o.createTextRange();u.moveToPoint(s),u.select()}this._updatePreview(!1)},_getLibraryContent:function(){var t=e.Handlebars.compile(u.LIBRARY),r=this.get("library"),s="";e.Handlebars.registerHelper("split",function(e,t,n){var r,i,s;if(typeof e=="undefined"||typeof t=="undefined")return"";s="",r=t.trim().split(e);while(r.length>0)i=r.shift().trim(),s+=n.fn(i);return s}),s=t({elementid:this.get("host").get("elementid"),component:n,library:r,CSS:i,DELIMITERS:o});var a=M.cfg.wwwroot+"/lib/editor/atto/plugins/equation/ajax.php",f={sesskey:M.cfg.sesskey,contextid:this.get("contextid"),action:"filtertext",text:s},l=e.io(a,{sync:!0,data:f,method:"POST"});return l.status===200&&(s=l.responseText),s}},{ATTRS:{texfilteractive:{value:!1},contextid:{value:null},library:{value:{}},texdocsurl:{value:null}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-core-event","io","event-valuechange","tabview","array-extras"]});
diff --git a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js
index f98b58cd49a..12740716cc2 100644
--- a/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js
+++ b/lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js
@@ -62,29 +62,34 @@ var COMPONENTNAME = 'atto_equation',
                 '<textarea class="fullwidth {{CSS.EQUATION_TEXT}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/>' +
                 '<label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label>' +
-                '<div describedby="{{elementid}}_cursorinfo" class="well well-small fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
+                '<div describedby="{{elementid}}_cursorinfo" class="well well-small p-1 fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div>' +
                 '<div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="{{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
+                    '<button class="btn btn-default {{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
                 '</div>' +
             '</form>',
         LIBRARY: '' +
             '<div class="{{CSS.LIBRARY}}">' +
-                '<ul>' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '{{#each library}}' +
-                        '<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
-                            '{{get_string groupname ../component}}' +
-                        '</a></li>' +
+                        '<li  class="nav-item">' +
+                            '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' role="tab" data-toggle="tab">' +
+                                '{{get_string groupname ../component}}' +
+                            '</a>' +
+                        '</li>' +
                     '{{/each}}' +
                 '</ul>' +
-                '<div class="{{CSS.LIBRARY_GROUPS}}">' +
+                '<div class="tab-content m-b-1 {{CSS.LIBRARY_GROUPS}}">' +
                     '{{#each library}}' +
-                        '<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+                        '<div data-medium-type="{{CSS.LINK}}" class="tab-pane" ' +
+                        'id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
                             '<div role="toolbar">' +
                             '{{#split "\n" elements}}' +
-                                '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">' +
+                                '<button class="btn btn-default" tabindex="-1" data-tex="{{this}}"' +
+                                    'aria-label="{{this}}" title="{{this}}">' +
                                     '{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}' +
                                 '</button>' +
                             '{{/split}}' +
@@ -222,13 +227,8 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         var content = this._getDialogueContent();
         dialogue.set('bodyContent', content);
 
-        var library = content.one(SELECTORS.LIBRARY);
+        content.one('.nav-item:first-child .nav-link').getDOMNode().click();
 
-        var tabview = new Y.TabView({
-            srcNode: library
-        });
-
-        tabview.render();
         dialogue.show();
         // Notify the filters about the modified nodes.
         require(['core/event'], function(event) {
diff --git a/lib/editor/atto/plugins/equation/yui/src/button/js/button.js b/lib/editor/atto/plugins/equation/yui/src/button/js/button.js
index 849a967fc1d..6db2cb882c5 100644
--- a/lib/editor/atto/plugins/equation/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/equation/yui/src/button/js/button.js
@@ -60,29 +60,34 @@ var COMPONENTNAME = 'atto_equation',
                 '<textarea class="fullwidth {{CSS.EQUATION_TEXT}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_TEXT}}" rows="8"></textarea><br/>' +
                 '<label for="{{elementid}}_{{CSS.EQUATION_PREVIEW}}">{{get_string "preview" component}}</label>' +
-                '<div describedby="{{elementid}}_cursorinfo" class="well well-small fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
+                '<div describedby="{{elementid}}_cursorinfo" class="well well-small p-1 fullwidth {{CSS.EQUATION_PREVIEW}}" ' +
                         'id="{{elementid}}_{{CSS.EQUATION_PREVIEW}}"></div>' +
                 '<div id="{{elementid}}_cursorinfo">{{get_string "cursorinfo" component}}</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="{{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
+                    '<button class="btn btn-default {{CSS.SUBMIT}}">{{get_string "saveequation" component}}</button>' +
                 '</div>' +
             '</form>',
         LIBRARY: '' +
             '<div class="{{CSS.LIBRARY}}">' +
-                '<ul>' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '{{#each library}}' +
-                        '<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
-                            '{{get_string groupname ../component}}' +
-                        '</a></li>' +
+                        '<li  class="nav-item">' +
+                            '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' role="tab" data-toggle="tab">' +
+                                '{{get_string groupname ../component}}' +
+                            '</a>' +
+                        '</li>' +
                     '{{/each}}' +
                 '</ul>' +
-                '<div class="{{CSS.LIBRARY_GROUPS}}">' +
+                '<div class="tab-content m-b-1 {{CSS.LIBRARY_GROUPS}}">' +
                     '{{#each library}}' +
-                        '<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+                        '<div data-medium-type="{{CSS.LINK}}" class="tab-pane" ' +
+                        'id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
                             '<div role="toolbar">' +
                             '{{#split "\n" elements}}' +
-                                '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">' +
+                                '<button class="btn btn-default" tabindex="-1" data-tex="{{this}}"' +
+                                    'aria-label="{{this}}" title="{{this}}">' +
                                     '{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}' +
                                 '</button>' +
                             '{{/split}}' +
@@ -220,13 +225,8 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         var content = this._getDialogueContent();
         dialogue.set('bodyContent', content);
 
-        var library = content.one(SELECTORS.LIBRARY);
+        content.one('.nav-item:first-child .nav-link').getDOMNode().click();
 
-        var tabview = new Y.TabView({
-            srcNode: library
-        });
-
-        tabview.render();
         dialogue.show();
         // Notify the filters about the modified nodes.
         require(['core/event'], function(event) {
diff --git a/lib/editor/atto/plugins/image/styles.css b/lib/editor/atto/plugins/image/styles.css
index a913c735951..8656f0e261f 100644
--- a/lib/editor/atto/plugins/image/styles.css
+++ b/lib/editor/atto/plugins/image/styles.css
@@ -6,7 +6,7 @@
 }
 
 .atto_image_preview_box {
-    max-height: 200px;
+    max-height: 150px;
     margin-bottom: 1em;
     overflow: auto;
 }
@@ -15,23 +15,6 @@
     cursor: pointer;
 }
 
-.atto_image_size {
-    display: inline-block;
-}
-
-.atto_image_size input[type=checkbox] {
-    margin-left: 1em;
-    margin-right: 1em;
-}
-
-.atto_image_size input[type=text] {
-    width: 3em;
-}
-
-.atto_image_size label {
-    display: inline-block;
-}
-
 .atto_image_button_text-top {
     vertical-align: text-top;
     margin: 0 0.5em;
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
index 69ab2fdce7e..899c1a847fb 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
@@ -96,52 +96,79 @@ var CSS = {
 
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
-                '<br/>' +
 
                 // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input class="form-control {{CSS.INPUTURL}}" type="url" ' +
+                            'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default {{CSS.IMAGEBROWSER}}" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth {{CSS.INPUTURL}}" type="url" ' +
+                        'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
 
                 // Add the Alt box.
-                '<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">' +
+                '<div style="display:none" role="alert" class="alert alert-warning m-b-1 {{CSS.IMAGEALTWARNING}}">' +
                     '{{get_string "presentationoraltrequired" component}}' +
                 '</div>' +
+                '<div class="m-b-1">' +
                 '<label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
-                '<br/>' +
+                '<input class="form-control fullwidth {{CSS.INPUTALT}}" type="text" value="" ' +
+                'id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
 
                 // Add the presentation select box.
-                '<input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
+                '<div class="form-check">' +
+                '<input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" ' +
+                    'id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
                     '{{get_string "presentation" component}}' +
                 '</label>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
 
                 // Add the size entry boxes.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}">' +
+                '<div class="m-b-1">' +
+                '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x ' +
+                '<input type="text" class="form-control m-r-1 input-mini {{CSS.INPUTWIDTH}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
 
                 // Add the height entry box.
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
+                '<input type="text" class="form-control m-l-1 input-mini {{CSS.INPUTHEIGHT}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
 
                 // Add the constrain checkbox.
-                '<input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
-                '<label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label>' +
+                '<div class="form-check m-l-2">' +
+                '<input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">' +
+                '{{get_string "constrain" component}}</label>' +
+                '</div>' +
+                '</div>' +
                 '</div>' +
 
                 // Add the alignment selector.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
-                '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
+                '<div class="form-inline m-b-1">' +
+                '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
+                '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
                         '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
+                '</div>' +
                 // Hidden input to store custom styles.
                 '<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
                 '<br/>' +
@@ -153,7 +180,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the submit button and close the form.
-                '<button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
+                '<button class="btn btn-default {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
                 '</div>' +
             '</form>',
 
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
index 78edf53af19..bbe3e394602 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
@@ -1,3 +1,3 @@
-YUI.add("moodle-atto_image-button",function(e,t){var n={RESPONSIVE:"img-responsive",INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview",IMAGEPREVIEWBOX:"atto_image_preview_box",ALIGNSETTINGS:"atto_image_button"},r={INPUTURL:"."+n.INPUTURL},i=[{name:"verticalAlign",str:"alignment_top",value:"text-top",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_middle",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_bottom",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",str:"alignment_left",value:"left",margin:"0 0.5em 0 0"},{name:"float",str:"alignment_right",value:"right",margin:"0 0 0 0.5em"}],s={ISPERCENT:/\d+%/},o="atto_image",u='<form class="atto_form"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><br/>{{#if showFilepicker}}<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>{{/if}}<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">{{get_string "presentationoraltrequired" component}}</div><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/><br/><input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x <label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div><label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}">{{get_string str ../component}}</option>{{/each}}</select><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img src="#" class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>',a='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if customstyle}}style="{{customstyle}}" {{/if}}{{#if classlist}}class="{{classlist}}" {{/if}}{{#if id}}id="{{id}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_rawImageDimensions:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._displayDialogue,"img",this),this.editor.delegate("click",this._handleClick,"img",this),this.editor.on("drop",this._handleDragDrop,this),this.editor.on("dragover",function(e){e.preventDefault()},this),this.editor.on("dragenter",function(e){e.preventDefault()},this)},_handleDragDrop:function(t){var n=this,r=this.get("host"),i=e.Handlebars.compile(a);r.saveSelection(),t=t._event;var s=t.dataTransfer&&t.dataTransfer.files&&t.dataTransfer.files.length;if(s&&/^image\//.test(t.dataTransfer.files[0].type)){var u=r.get("filepickeroptions").image,f=u.savepath===undefined?"/":u.savepath,l=new FormData,c=0,h="",p=new XMLHttpRequest,d="",v=Object.keys(u.repositories);t.preventDefault(),t.stopPropagation(),l.append("repo_upload_file",t.dataTransfer.files[0]),l.append("itemid",u.itemid);for(var m=0;m<v.length;m++)if(u.repositories[v[m]].type==="upload"){l.append("repo_id",u.repositories[v[m]].id);break}return l.append("env",u.env),l.append("sesskey",M.cfg.sesskey),l.append("client_id",u.client_id),l.append("savepath",f),l.append("ctx_id",u.context.id),c=(new Date).getTime(),h="moodleimage_"+Math.round(Math.random()*1e5)+"-"+c,r.focus(),r.restoreSelection(),d=i({url:M.util.image_url("i/loading_small","moodle"),alt:M.util.get_string("uploading",o),id:h}),r.insertContentAtFocusPoint(d),n.markUpdated(),p.onreadystatechange=function(){var t=n.editor.one("#"+h),r,s,o,u;if(p.readyState===4)if(p.status===200){r=JSON.parse(p.responseText);if(r){if(r.error)return t&&t.remove(!0),new M.core.ajaxException(r);s=r,r.event&&r.event==="fileexists"&&(s=r.newfile),o=i({url:s.url,presentation:!0}),u=e.Node.create(o),t?t.replace(u):n.editor.appendChild(u),n.markUpdated()}}else e.use("moodle-core-notification-alert",function(){new M.core.alert({message:M.util.get_string("servererror","moodle")})}),t&&t.remove(!0)},p.open("POST",M.cfg.wwwroot+"/repository/repository_ajax.php?action=upload",!0),p.send(l),!1}},_handleClick:function(e){var t=e.target,n=this.get
-("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;this._rawImageDimensions=null;var e=this.getDialogue({headerContent:M.util.get_string("imageproperties",o),width:"480px",focusAfterHide:!0,focusOnShowSelector:r.INPUTURL});e.set("bodyContent",this._getDialogueContent()).show()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onerror=function(){var e=r._form.one("."+n.IMAGEPREVIEW);e.setStyles({display:"none"}),r.getDialogue().centerDialogue()},t.onload=function(){var e,t,i,o,u;r._rawImageDimensions={width:this.width,height:this.height},e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=""+this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=""+this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.setAttribute("src",this.src),e.setStyles({display:"inline"}),e=r._form.one("."+n.INPUTCONSTRAIN),t.match(s.ISPERCENT)&&i.match(s.ISPERCENT)?e.set("checked",t===i):(this.width===0&&(this.width=1),this.height===0&&(this.height=1),o=Math.round(1e3*parseInt(t,10)/this.width),u=Math.round(1e3*parseInt(i,10)/this.height),e.set("checked",o===u)),r._autoAdjustSize(r),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(u),r=this.get("host").canShowFilepicker("image"),s=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:o,showFilepicker:r,alignments:i}));return this._form=s,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+n.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),r&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),s},_autoAdjustSize:function(e,t){t=t||!1;var r=this._form.one("."+n.INPUTWIDTH),i="width",o=this._form.one("."+n.INPUTHEIGHT),u="height",a=this._form.one("."+n.INPUTCONSTRAIN),f=r.get("value"),l=o.get("value"),c=this._form.one("."+n.IMAGEPREVIEW),h,p;if(!this._rawImageDimensions)return;f===""&&(f=this._rawImageDimensions[i],r.set("value",f),f=r.get("value")),c.setStyles({width:null,height:null});if(!a.get("checked"))f.match(s.ISPERCENT)?(h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p+"px")):c.setStyle("width",f+"px"),l.match(s.ISPERCENT)?(h=parseInt(l,10),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p+"px")):c.setStyle("height",l+"px");else{if(t){var d;d=r,r=o,o=d,d=i,i=u,u=d,d=f,f=l,l=d}f.match(s.ISPERCENT)?(l=f,h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p)):(l=Math.round(f/this._rawImageDimensions[i]*this._rawImageDimensions[u]),t?c.setStyles({width:l,height:f}):c.setStyles({width:f,height:l})),o.set("value",l)}},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url)}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none"),i.some(function(t){return t.isDefault?(e.one("."+n.INPUTALIGNMENT).set("value",t.value),!0):!1},this);return}t.align&&e.one("."+n.INPUTALIGNMENT).set("value",t.align),t.customstyle&&e.one("."+n.INPUTCUSTOMSTYLE).set("value",t.customstyle),t.width&&e.one("."+n.INPUTWIDTH).set("value",t.width),t.height&&e.one("."+n.INPUTHEIGHT).set("value",t.height),t.alt&&e.one("."+n.INPUTALT).set("value",t.alt),t.src&&(e.one("."+n.INPUTURL).set("value",t.src),this._loadPreviewImage(t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:"",presentation:!1},t=this.get("host").getSelectedNodes(),n,r,i,o;return t&&(t=t.filter("img")),t&&t.size()?(o=this._removeLegacyAlignment(t.item(0)),this._selectedImage=o,i=o.getAttribute("style"),e.customstyle=i,n=o.getAttribute("width"),n.match(s.ISPERCENT)||(n=parseInt(n,10)),r=o.getAttribute("height"),r.match(s.ISPERCENT)||(r=parseInt(r,10)),n!==0&&(e.width=n),r!==0&&(e.height=r),this._getAlignmentPropeties(o,e),e.src=o.getAttribute("src"),e.alt=o.getAttribute("alt")||"",e.presentation=o.get("role")==="presentation",e):(this._selectedImage=null,!1)},_getAlignmentPropeties:function(e,t){var n=!1,r;n=i.some(function(n){var i=this._getAlignmentClass(n.value);return e.hasClass(i)?(t.align=n.value,!0):(n.isDefault&&(r=n.value),!1)},this),!n&&r&&(t.align=r)},_urlChanged:function(){var e=this._form.one("."+n.INPUTURL);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),o=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),f=r.one("."+n.INPUTHEIGHT).get("value"),l=this._getAlignmentClass(r.one("."+n.INPUTALIGNMENT).get("value")),c=r.one("."+n.IMAGEPRESENTATION).get("checked"),h=r.one("."+n.INPUTCONSTRAIN).get("checked"),p,d=r.one("."+n.INPUTCUSTOMSTYLE).get("value"),v=[],m=this.get("host");t.preventDefault();if(this._updateWarning())return;m.focus();if(i!==""){this._selectedImage?m.setSelection(m.getSelectionFromNode(this._selectedImage)):m.setSelection(this._currentSelection
-),h&&v.push(n.RESPONSIVE),v.push(l);if(!u.match(s.ISPERCENT)&&isNaN(parseInt(u,10))){r.one("."+n.INPUTWIDTH).focus();return}if(!f.match(s.ISPERCENT)&&isNaN(parseInt(f,10))){r.one("."+n.INPUTHEIGHT).focus();return}var g=e.Handlebars.compile(a);p=g({url:i,alt:o,width:u,height:f,presentation:c,customstyle:d,classlist:v.join(" ")}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()},_removeLegacyAlignment:function(t){return t.getStyle("margin")?(i.some(function(n){if(t.getStyle(n.name)!==n.value)return!1;var r=e.Node.create("<div>");return r.setStyle("margin",n.margin),t.getStyle("margin")!==r.getStyle("margin")?!1:(t.addClass(this._getAlignmentClass(n.value)),t.setStyle(n.name,null),t.setStyle("margin",null),!0)},this),t):t},_getAlignmentClass:function(e){return n.ALIGNSETTINGS+"_"+e},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_image-button",function(e,t){var n={RESPONSIVE:"img-responsive",INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview",IMAGEPREVIEWBOX:"atto_image_preview_box",ALIGNSETTINGS:"atto_image_button"},r={INPUTURL:"."+n.INPUTURL},i=[{name:"verticalAlign",str:"alignment_top",value:"text-top",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_middle",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_bottom",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",str:"alignment_left",value:"left",margin:"0 0.5em 0 0"},{name:"float",str:"alignment_right",value:"right",margin:"0 0 0 0.5em"}],s={ISPERCENT:/\d+%/},o="atto_image",u='<form class="atto_form">{{#if showFilepicker}}<div class="m-b-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><div class="input-group input-append w-100"><input class="form-control {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><span class="input-group-append"><button class="btn btn-default {{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{else}}<div class="m-b-1"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input class="form-control fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/></div>{{/if}}<div style="display:none" role="alert" class="alert alert-warning m-b-1 {{CSS.IMAGEALTWARNING}}">{{get_string "presentationoraltrequired" component}}</div><div class="m-b-1"><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><input class="form-control fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label></div></div><div class="m-b-1"><label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="form-control m-r-1 input-mini {{CSS.INPUTWIDTH}}" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="form-control m-l-1 input-mini {{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><div class="form-check m-l-2"><input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div></div></div><div class="form-inline m-b-1"><label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}">{{get_string str ../component}}</option>{{/each}}</select></div><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img src="#" class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="btn btn-default {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>',a='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if customstyle}}style="{{customstyle}}" {{/if}}{{#if classlist}}class="{{classlist}}" {{/if}}{{#if id}}id="{{id}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_rawImageDimensions:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._displayDialogue,"img",this),this.editor.delegate("click",this._handleClick,"img",this),this.editor.on("drop",this._handleDragDrop,this),this.editor.on("dragover",function(e){e.preventDefault()},this),this.editor.on("dragenter",function(e){e.preventDefault()},this)},_handleDragDrop:function(t){var n=this,r=this.get("host"),i=e.Handlebars.compile(a);r.saveSelection(),t=t._event;var s=t.dataTransfer&&t.dataTransfer.files&&t.dataTransfer.files.length;if(s&&/^image\//.test(t.dataTransfer.files[0].type)){var u=r.get("filepickeroptions").image,f=u.savepath===undefined?"/":u.savepath,l=new FormData,c=0,h="",p=new XMLHttpRequest,d="",v=Object.keys(u.repositories);t.preventDefault(),t.stopPropagation(),l.append("repo_upload_file",t.dataTransfer.files[0]),l.append("itemid",u.itemid);for(var m=0;m<v.length;m++)if(u.repositories[v[m]].type==="upload"){l.append("repo_id",u.repositories[v[m]].id);break}return l.append("env",u.env),l.append("sesskey",M.cfg.sesskey),l.append("client_id",u.client_id),l.append("savepath",f),l.append("ctx_id",u.context.id),c=(new Date).getTime(),h="moodleimage_"+Math.round(Math.random()*1e5)+"-"+c,r.focus(),r.restoreSelection(),d=i({url:M.util.image_url("i/loading_small","moodle"),alt:M.util.get_string("uploading",o),id:h}),r.insertContentAtFocusPoint(d),n.markUpdated
+(),p.onreadystatechange=function(){var t=n.editor.one("#"+h),r,s,o,u;if(p.readyState===4)if(p.status===200){r=JSON.parse(p.responseText);if(r){if(r.error)return t&&t.remove(!0),new M.core.ajaxException(r);s=r,r.event&&r.event==="fileexists"&&(s=r.newfile),o=i({url:s.url,presentation:!0}),u=e.Node.create(o),t?t.replace(u):n.editor.appendChild(u),n.markUpdated()}}else e.use("moodle-core-notification-alert",function(){new M.core.alert({message:M.util.get_string("servererror","moodle")})}),t&&t.remove(!0)},p.open("POST",M.cfg.wwwroot+"/repository/repository_ajax.php?action=upload",!0),p.send(l),!1}},_handleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;this._rawImageDimensions=null;var e=this.getDialogue({headerContent:M.util.get_string("imageproperties",o),width:"480px",focusAfterHide:!0,focusOnShowSelector:r.INPUTURL});e.set("bodyContent",this._getDialogueContent()).show()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onerror=function(){var e=r._form.one("."+n.IMAGEPREVIEW);e.setStyles({display:"none"}),r.getDialogue().centerDialogue()},t.onload=function(){var e,t,i,o,u;r._rawImageDimensions={width:this.width,height:this.height},e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=""+this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=""+this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.setAttribute("src",this.src),e.setStyles({display:"inline"}),e=r._form.one("."+n.INPUTCONSTRAIN),t.match(s.ISPERCENT)&&i.match(s.ISPERCENT)?e.set("checked",t===i):(this.width===0&&(this.width=1),this.height===0&&(this.height=1),o=Math.round(1e3*parseInt(t,10)/this.width),u=Math.round(1e3*parseInt(i,10)/this.height),e.set("checked",o===u)),r._autoAdjustSize(r),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(u),r=this.get("host").canShowFilepicker("image"),s=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:o,showFilepicker:r,alignments:i}));return this._form=s,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+n.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),r&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),s},_autoAdjustSize:function(e,t){t=t||!1;var r=this._form.one("."+n.INPUTWIDTH),i="width",o=this._form.one("."+n.INPUTHEIGHT),u="height",a=this._form.one("."+n.INPUTCONSTRAIN),f=r.get("value"),l=o.get("value"),c=this._form.one("."+n.IMAGEPREVIEW),h,p;if(!this._rawImageDimensions)return;f===""&&(f=this._rawImageDimensions[i],r.set("value",f),f=r.get("value")),c.setStyles({width:null,height:null});if(!a.get("checked"))f.match(s.ISPERCENT)?(h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p+"px")):c.setStyle("width",f+"px"),l.match(s.ISPERCENT)?(h=parseInt(l,10),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p+"px")):c.setStyle("height",l+"px");else{if(t){var d;d=r,r=o,o=d,d=i,i=u,u=d,d=f,f=l,l=d}f.match(s.ISPERCENT)?(l=f,h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p)):(l=Math.round(f/this._rawImageDimensions[i]*this._rawImageDimensions[u]),t?c.setStyles({width:l,height:f}):c.setStyles({width:f,height:l})),o.set("value",l)}},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url)}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none"),i.some(function(t){return t.isDefault?(e.one("."+n.INPUTALIGNMENT).set("value",t.value),!0):!1},this);return}t.align&&e.one("."+n.INPUTALIGNMENT).set("value",t.align),t.customstyle&&e.one("."+n.INPUTCUSTOMSTYLE).set("value",t.customstyle),t.width&&e.one("."+n.INPUTWIDTH).set("value",t.width),t.height&&e.one("."+n.INPUTHEIGHT).set("value",t.height),t.alt&&e.one("."+n.INPUTALT).set("value",t.alt),t.src&&(e.one("."+n.INPUTURL).set("value",t.src),this._loadPreviewImage(t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:"",presentation:!1},t=this.get("host").getSelectedNodes(),n,r,i,o;return t&&(t=t.filter("img")),t&&t.size()?(o=this._removeLegacyAlignment(t.item(0)),this._selectedImage=o,i=o.getAttribute("style"),e.customstyle=i,n=o.getAttribute("width"),n.match(s.ISPERCENT)||(n=parseInt(n,10)),r=o.getAttribute("height"),r.match(s.ISPERCENT)||(r=parseInt(r,10)),n!==0&&(e.width=n),r!==0&&(e.height=r),this._getAlignmentPropeties(o,e),e.src=o.getAttribute("src"),e.alt=o.getAttribute("alt")||"",e.presentation=o.get("role")==="presentation",e):(this._selectedImage=null,!1)},_getAlignmentPropeties:function(e,t){var n=!1,r;n=i.some(function(n){var i=this._getAlignmentClass(n.value);return e.hasClass(i)?(t.align=n.value,!0):(n.isDefault&&(r=n.value),!1)},this),!n&&r&&(t.align=r)},_urlChanged:function(){var e=this._form.one("."+n.INPUTURL);e.get("value")!==""&&
+this._loadPreviewImage(e.get("value"))},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),o=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),f=r.one("."+n.INPUTHEIGHT).get("value"),l=this._getAlignmentClass(r.one("."+n.INPUTALIGNMENT).get("value")),c=r.one("."+n.IMAGEPRESENTATION).get("checked"),h=r.one("."+n.INPUTCONSTRAIN).get("checked"),p,d=r.one("."+n.INPUTCUSTOMSTYLE).get("value"),v=[],m=this.get("host");t.preventDefault();if(this._updateWarning())return;m.focus();if(i!==""){this._selectedImage?m.setSelection(m.getSelectionFromNode(this._selectedImage)):m.setSelection(this._currentSelection),h&&v.push(n.RESPONSIVE),v.push(l);if(!u.match(s.ISPERCENT)&&isNaN(parseInt(u,10))){r.one("."+n.INPUTWIDTH).focus();return}if(!f.match(s.ISPERCENT)&&isNaN(parseInt(f,10))){r.one("."+n.INPUTHEIGHT).focus();return}var g=e.Handlebars.compile(a);p=g({url:i,alt:o,width:u,height:f,presentation:c,customstyle:d,classlist:v.join(" ")}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()},_removeLegacyAlignment:function(t){return t.getStyle("margin")?(i.some(function(n){if(t.getStyle(n.name)!==n.value)return!1;var r=e.Node.create("<div>");return r.setStyle("margin",n.margin),t.getStyle("margin")!==r.getStyle("margin")?!1:(t.addClass(this._getAlignmentClass(n.value)),t.setStyle(n.name,null),t.setStyle("margin",null),!0)},this),t):t},_getAlignmentClass:function(e){return n.ALIGNSETTINGS+"_"+e},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
index 18416c3ae3a..293794ccb7c 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
@@ -96,52 +96,79 @@ var CSS = {
 
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
-                '<br/>' +
 
                 // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input class="form-control {{CSS.INPUTURL}}" type="url" ' +
+                            'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default {{CSS.IMAGEBROWSER}}" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth {{CSS.INPUTURL}}" type="url" ' +
+                        'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
 
                 // Add the Alt box.
-                '<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">' +
+                '<div style="display:none" role="alert" class="alert alert-warning m-b-1 {{CSS.IMAGEALTWARNING}}">' +
                     '{{get_string "presentationoraltrequired" component}}' +
                 '</div>' +
+                '<div class="m-b-1">' +
                 '<label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
-                '<br/>' +
+                '<input class="form-control fullwidth {{CSS.INPUTALT}}" type="text" value="" ' +
+                'id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
 
                 // Add the presentation select box.
-                '<input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
+                '<div class="form-check">' +
+                '<input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" ' +
+                    'id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
                     '{{get_string "presentation" component}}' +
                 '</label>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
 
                 // Add the size entry boxes.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}">' +
+                '<div class="m-b-1">' +
+                '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x ' +
+                '<input type="text" class="form-control m-r-1 input-mini {{CSS.INPUTWIDTH}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
 
                 // Add the height entry box.
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
+                '<input type="text" class="form-control m-l-1 input-mini {{CSS.INPUTHEIGHT}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
 
                 // Add the constrain checkbox.
-                '<input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
-                '<label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label>' +
+                '<div class="form-check m-l-2">' +
+                '<input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">' +
+                '{{get_string "constrain" component}}</label>' +
+                '</div>' +
+                '</div>' +
                 '</div>' +
 
                 // Add the alignment selector.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
-                '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
+                '<div class="form-inline m-b-1">' +
+                '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
+                '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
                         '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
+                '</div>' +
                 // Hidden input to store custom styles.
                 '<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
                 '<br/>' +
@@ -153,7 +180,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the submit button and close the form.
-                '<button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
+                '<button class="btn btn-default {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
                 '</div>' +
             '</form>',
 
diff --git a/lib/editor/atto/plugins/image/yui/src/button/js/button.js b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
index f9c0d607e72..5cc1626fdc7 100644
--- a/lib/editor/atto/plugins/image/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
@@ -94,52 +94,79 @@ var CSS = {
 
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
-                '<br/>' +
 
                 // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input class="form-control {{CSS.INPUTURL}}" type="url" ' +
+                            'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default {{CSS.IMAGEBROWSER}}" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth {{CSS.INPUTURL}}" type="url" ' +
+                        'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
 
                 // Add the Alt box.
-                '<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">' +
+                '<div style="display:none" role="alert" class="alert alert-warning m-b-1 {{CSS.IMAGEALTWARNING}}">' +
                     '{{get_string "presentationoraltrequired" component}}' +
                 '</div>' +
+                '<div class="m-b-1">' +
                 '<label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label>' +
-                '<input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
-                '<br/>' +
+                '<input class="form-control fullwidth {{CSS.INPUTALT}}" type="text" value="" ' +
+                'id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/>' +
 
                 // Add the presentation select box.
-                '<input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
+                '<div class="form-check">' +
+                '<input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" ' +
+                    'id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
                     '{{get_string "presentation" component}}' +
                 '</label>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
 
                 // Add the size entry boxes.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
-                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}">' +
+                '<div class="m-b-1">' +
+                '<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
+                '<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x ' +
+                '<input type="text" class="form-control m-r-1 input-mini {{CSS.INPUTWIDTH}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
 
                 // Add the height entry box.
                 '<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label>' +
-                '<input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
+                '<input type="text" class="form-control m-l-1 input-mini {{CSS.INPUTHEIGHT}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
 
                 // Add the constrain checkbox.
-                '<input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
-                '<label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label>' +
+                '<div class="form-check m-l-2">' +
+                '<input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" ' +
+                'id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
+                '<label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">' +
+                '{{get_string "constrain" component}}</label>' +
+                '</div>' +
+                '</div>' +
                 '</div>' +
 
                 // Add the alignment selector.
-                '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
-                '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
+                '<div class="form-inline m-b-1">' +
+                '<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
+                '<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
                         '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
+                '</div>' +
                 // Hidden input to store custom styles.
                 '<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
                 '<br/>' +
@@ -151,7 +178,7 @@ var CSS = {
                 '</div>' +
 
                 // Add the submit button and close the form.
-                '<button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
+                '<button class="btn btn-default {{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button>' +
                 '</div>' +
             '</form>',
 
diff --git a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js
index 7aa19072e73..d1c971e635b 100644
--- a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js
+++ b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js
@@ -43,20 +43,32 @@ var COMPONENTNAME = 'atto_link',
     },
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/><br/>' +
-
-                // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="openlinkbrowser">{{get_string "browserepositories" component}}</button>' +
-                    '<br/>' +
+                    '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                    '<div class="input-group input-append w-100 m-b-1">' +
+                        '<input class="form-control url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry"/>' +
+                        '<span class="input-group-append">' +
+                            '<button class="btn btn-default openlinkbrowser" type="button">' +
+                            '{{get_string "browserepositories" component}}</button>' +
+                        '</span>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
-                '<input type="checkbox" class="newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label>' +
-                '<br/>' +
+                '<div class="form-check">' +
+                    '<input type="checkbox" class="form-check-input newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
+                    '<label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">' +
+                    '{{get_string "openinnewwindow" component}}' +
+                    '</label>' +
+                '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button type="submit" class="submit">{{get_string "createlink" component}}</button>' +
+                    '<button type="submit" class="btn btn-default submit">{{get_string "createlink" component}}</button>' +
                 '</div>' +
             '</form>';
 Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
diff --git a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js
index f7b3aeb9d0b..4f1d0462c73 100644
--- a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js
+++ b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_link-button",function(e,t){var n="atto_link",r={NEWWINDOW:"atto_link_openinnewwindow",URLINPUT:"atto_link_urlentry"},i={URLINPUT:".atto_link_urlentry"},s='<form class="atto_form"><label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label><input class="fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/><br/>{{#if showFilepicker}}<button class="openlinkbrowser">{{get_string "browserepositories" component}}</button><br/>{{/if}}<input type="checkbox" class="newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/><label class="sameline" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label><br/><div class="mdl-align"><br/><button type="submit" class="submit">{{get_string "createlink" component}}</button></div></form>';e.namespace("M.atto_link").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_content:null,initializer:function(){this.addButton({icon:"e/insert_edit_link",keys:"75",callback:this._displayDialogue,tags:"a",tagMatchRequiresAll:!1}),this.addButton({buttonName:"unlink",callback:this._unlink,icon:"e/remove_link",title:"unlink",tags:"a",tagMatchRequiresAll:!1})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("createlink",n),focusAfterHide:!0,focusOnShowSelector:i.URLINPUT});e.set("bodyContent",this._getDialogueContent()),this._resolveAnchors(),e.show()},_resolveAnchors:function(){var t=this.get("host").getSelectionParentNode(),n,r,i,s;if(!t)return;n=this._findSelectedAnchors(e.one(t)),n.length>0&&(r=n[0],this._currentSelection=this.get("host").getSelectionFromNode(r),i=r.getAttribute("href"),s=r.getAttribute("target"),i!==""&&this._content.one(".url").setAttribute("value",i),s==="_blank"?this._content.one(".newwindow").setAttribute("checked","checked"):this._content.one(".newwindow").removeAttribute("checked"))},_filepickerCallback:function(e){this.getDialogue().set("focusAfterHide",null).hide(),e.url!==""&&(this._setLinkOnSelection(e.url),this.markUpdated())},_setLink:function(e){var t,n;e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=this._content.one(".url"),n=t.get("value");if(n!==""){n=n.trim();var r=new RegExp(/^[a-zA-Z]*\.*\/|^#|^[a-zA-Z]*:/);r.test(n)||(n="http://"+n),this._setLinkOnSelection(n),this.markUpdated()}},_setLinkOnSelection:function(t){var n=this.get("host"),r,i,s,o;this.editor.focus(),n.setSelection(this._currentSelection),this._currentSelection[0].collapsed?(r=e.Node.create("<a>"+t+"</a>"),r.setAttribute("href",t),i=n.insertContentAtFocusPoint(r.get("outerHTML")),n.setSelection(n.getSelectionFromNode(i))):(document.execCommand("unlink",!1,null),document.execCommand("createLink",!1,t),i=n.getSelectionParentNode());if(!i)return;return o=this._findSelectedAnchors(e.one(i)),e.Array.each(o,function(e){s=this._content.one(".newwindow"),s.get("checked")?e.setAttribute("target","_blank"):e.removeAttribute("target")},this),i},_findSelectedAnchors:function(e){var t=e.get("tagName"),n,r;return t&&t.toLowerCase()==="a"?[e]:(r=[],e.all("a").each(function(e){!n&&this.get("host").selectionContainsNode(e)&&r.push(e)},this),r.length>0?r:(n=e.ancestor("a"),n?[n]:[]))},_getDialogueContent:function(){var t=this.get("host").canShowFilepicker("link"),i=e.Handlebars.compile(s);return this._content=e.Node.create(i({showFilepicker:t,component:n,CSS:r})),this._content.one(".submit").on("click",this._setLink,this),t&&this._content.one(".openlinkbrowser").on("click",function(e){e.preventDefault(),this.get("host").showFilepicker("link",this._filepickerCallback,this)},this),this._content},_unlink:function(){var e=this.get("host"),t=e.getSelection();if(t&&t.length)if(t[0].startOffset===t[0].endOffset){var n=e.getSelectedNodes();n&&(n.each(function(t){var n=t.ancestor("a",!0);n&&(e.setSelection(e.getSelectionFromNode(n)),document.execCommand("unlink",!1,null))},this),this.markUpdated())}else document.execCommand("unlink",!1,null),this.markUpdated()}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_link-button",function(e,t){var n="atto_link",r={NEWWINDOW:"atto_link_openinnewwindow",URLINPUT:"atto_link_urlentry"},i={URLINPUT:".atto_link_urlentry"},s='<form class="atto_form">{{#if showFilepicker}}<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label><div class="input-group input-append w-100 m-b-1"><input class="form-control url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry"/><span class="input-group-append"><button class="btn btn-default openlinkbrowser" type="button">{{get_string "browserepositories" component}}</button></span></div>{{else}}<div class="m-b-1"><label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label><input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/></div>{{/if}}<div class="form-check"><input type="checkbox" class="form-check-input newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/><label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label></div><div class="mdl-align"><br/><button type="submit" class="btn btn-default submit">{{get_string "createlink" component}}</button></div></form>';e.namespace("M.atto_link").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_content:null,initializer:function(){this.addButton({icon:"e/insert_edit_link",keys:"75",callback:this._displayDialogue,tags:"a",tagMatchRequiresAll:!1}),this.addButton({buttonName:"unlink",callback:this._unlink,icon:"e/remove_link",title:"unlink",tags:"a",tagMatchRequiresAll:!1})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("createlink",n),focusAfterHide:!0,focusOnShowSelector:i.URLINPUT});e.set("bodyContent",this._getDialogueContent()),this._resolveAnchors(),e.show()},_resolveAnchors:function(){var t=this.get("host").getSelectionParentNode(),n,r,i,s;if(!t)return;n=this._findSelectedAnchors(e.one(t)),n.length>0&&(r=n[0],this._currentSelection=this.get("host").getSelectionFromNode(r),i=r.getAttribute("href"),s=r.getAttribute("target"),i!==""&&this._content.one(".url").setAttribute("value",i),s==="_blank"?this._content.one(".newwindow").setAttribute("checked","checked"):this._content.one(".newwindow").removeAttribute("checked"))},_filepickerCallback:function(e){this.getDialogue().set("focusAfterHide",null).hide(),e.url!==""&&(this._setLinkOnSelection(e.url),this.markUpdated())},_setLink:function(e){var t,n;e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),t=this._content.one(".url"),n=t.get("value");if(n!==""){n=n.trim();var r=new RegExp(/^[a-zA-Z]*\.*\/|^#|^[a-zA-Z]*:/);r.test(n)||(n="http://"+n),this._setLinkOnSelection(n),this.markUpdated()}},_setLinkOnSelection:function(t){var n=this.get("host"),r,i,s,o;this.editor.focus(),n.setSelection(this._currentSelection),this._currentSelection[0].collapsed?(r=e.Node.create("<a>"+t+"</a>"),r.setAttribute("href",t),i=n.insertContentAtFocusPoint(r.get("outerHTML")),n.setSelection(n.getSelectionFromNode(i))):(document.execCommand("unlink",!1,null),document.execCommand("createLink",!1,t),i=n.getSelectionParentNode());if(!i)return;return o=this._findSelectedAnchors(e.one(i)),e.Array.each(o,function(e){s=this._content.one(".newwindow"),s.get("checked")?e.setAttribute("target","_blank"):e.removeAttribute("target")},this),i},_findSelectedAnchors:function(e){var t=e.get("tagName"),n,r;return t&&t.toLowerCase()==="a"?[e]:(r=[],e.all("a").each(function(e){!n&&this.get("host").selectionContainsNode(e)&&r.push(e)},this),r.length>0?r:(n=e.ancestor("a"),n?[n]:[]))},_getDialogueContent:function(){var t=this.get("host").canShowFilepicker("link"),i=e.Handlebars.compile(s);return this._content=e.Node.create(i({showFilepicker:t,component:n,CSS:r})),this._content.one(".submit").on("click",this._setLink,this),t&&this._content.one(".openlinkbrowser").on("click",function(e){e.preventDefault(),this.get("host").showFilepicker("link",this._filepickerCallback,this)},this),this._content},_unlink:function(){var e=this.get("host"),t=e.getSelection();if(t&&t.length)if(t[0].startOffset===t[0].endOffset){var n=e.getSelectedNodes();n&&(n.each(function(t){var n=t.ancestor("a",!0);n&&(e.setSelection(e.getSelectionFromNode(n)),document.execCommand("unlink",!1,null))},this),this.markUpdated())}else document.execCommand("unlink",!1,null),this.markUpdated()}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
diff --git a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js
index 7aa19072e73..d1c971e635b 100644
--- a/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js
+++ b/lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js
@@ -43,20 +43,32 @@ var COMPONENTNAME = 'atto_link',
     },
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/><br/>' +
-
-                // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="openlinkbrowser">{{get_string "browserepositories" component}}</button>' +
-                    '<br/>' +
+                    '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                    '<div class="input-group input-append w-100 m-b-1">' +
+                        '<input class="form-control url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry"/>' +
+                        '<span class="input-group-append">' +
+                            '<button class="btn btn-default openlinkbrowser" type="button">' +
+                            '{{get_string "browserepositories" component}}</button>' +
+                        '</span>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
-                '<input type="checkbox" class="newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label>' +
-                '<br/>' +
+                '<div class="form-check">' +
+                    '<input type="checkbox" class="form-check-input newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
+                    '<label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">' +
+                    '{{get_string "openinnewwindow" component}}' +
+                    '</label>' +
+                '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button type="submit" class="submit">{{get_string "createlink" component}}</button>' +
+                    '<button type="submit" class="btn btn-default submit">{{get_string "createlink" component}}</button>' +
                 '</div>' +
             '</form>';
 Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
diff --git a/lib/editor/atto/plugins/link/yui/src/button/js/button.js b/lib/editor/atto/plugins/link/yui/src/button/js/button.js
index 822648323e0..51112dde086 100644
--- a/lib/editor/atto/plugins/link/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/link/yui/src/button/js/button.js
@@ -41,20 +41,32 @@ var COMPONENTNAME = 'atto_link',
     },
     TEMPLATE = '' +
             '<form class="atto_form">' +
-                '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
-                '<input class="fullwidth url {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_link_urlentry" size="32"/><br/>' +
-
-                // Add the repository browser button.
                 '{{#if showFilepicker}}' +
-                    '<button class="openlinkbrowser">{{get_string "browserepositories" component}}</button>' +
-                    '<br/>' +
+                    '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                    '<div class="input-group input-append w-100 m-b-1">' +
+                        '<input class="form-control url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry"/>' +
+                        '<span class="input-group-append">' +
+                            '<button class="btn btn-default openlinkbrowser" type="button">' +
+                            '{{get_string "browserepositories" component}}</button>' +
+                        '</span>' +
+                    '</div>' +
+                '{{else}}' +
+                    '<div class="m-b-1">' +
+                        '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
+                        '<input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" ' +
+                        'id="{{elementid}}_atto_link_urlentry" size="32"/>' +
+                    '</div>' +
                 '{{/if}}' +
-                '<input type="checkbox" class="newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
-                '<label class="sameline" for="{{elementid}}_{{CSS.NEWWINDOW}}">{{get_string "openinnewwindow" component}}</label>' +
-                '<br/>' +
+                '<div class="form-check">' +
+                    '<input type="checkbox" class="form-check-input newwindow" id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
+                    '<label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">' +
+                    '{{get_string "openinnewwindow" component}}' +
+                    '</label>' +
+                '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button type="submit" class="submit">{{get_string "createlink" component}}</button>' +
+                    '<button type="submit" class="btn btn-default submit">{{get_string "createlink" component}}</button>' +
                 '</div>' +
             '</form>';
 Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
diff --git a/lib/editor/atto/plugins/media/styles.css b/lib/editor/atto/plugins/media/styles.css
index ee5a759817e..f1ecb10e39d 100644
--- a/lib/editor/atto/plugins/media/styles.css
+++ b/lib/editor/atto/plugins/media/styles.css
@@ -1,106 +1,4 @@
-.atto_form.atto_media #video input,
-.atto_form.atto_media #audio input,
-.atto_form.atto_media #link input {
-    box-sizing: border-box;
-    height: inherit;
-}
-
 .atto_form.atto_media > .tab-content {
     max-height: 45vh;
     overflow-x: hidden;
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-left: -20px;
-    margin-right: -21px;
-}
-
-.atto_form.atto_media [id$="-advanced-settings"] label {
-    margin-right: 10px;
-}
-
-.atto_form.atto_media label {
-    display: inline-block;
-}
-
-.atto_form.atto_media label > span {
-    display: inline-block;
-    min-width: 6em;
-}
-
-.atto_form.atto_media .atto_media_track_lang_entry,
-.atto_form.atto_media .atto_media_track_label_entry {
-    width: 168px;
-}
-
-.atto_form.atto_media .atto_media_track_source {
-    margin-bottom: 10px;
-}
-
-.atto_form.atto_media select {
-    margin-right: 10px;
-}
-
-.atto_form.atto_media [id$="-tracks"] input[type=checkbox] {
-    margin-left: 10px;
-}
-
-.atto_form.atto_media .atto_media_track ~ .atto_media_track {
-    margin-top: 5px;
-    padding-top: 10px;
-    border-top: 1px solid #e5e5e5;
-}
-
-.atto_form.atto_media label.fullwidth {
-    width: 100%;
-}
-
-.atto_media_postersize {
-    display: inline-block;
-}
-
-.atto_media_postersize input[type=text] {
-    width: 3em;
-}
-
-input[size].atto_media_url_entry {
-    width: calc(100% - 15px);
-}
-
-.openmediabrowser {
-    margin-top: -4px;
-}
-
-.addcomponent,
-.removecomponent {
-    font-weight: bold;
-    margin-right: 10px;
-}
-
-.trackhelp {
-    text-align: right;
-}
-
-.atto_form.atto_media .atto_media_source > label {
-    width: calc(100% - 153px);
-}
-
-.atto_form.atto_media .atto_media_track_lang_entry,
-.atto_form.atto_media .atto_media_track_label_entry {
-    width: 116px;
-}
-
-.langlabel {
-    width: 42%;
-}
-
-.labellabel {
-    width: 44%;
-}
-
-.defaultlabel {
-    width: 14%;
-}
-
-[data-medium-type=link] label {
-    width: 100%;
-}
+}
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
index 603896a0d14..541685a4549 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js
@@ -116,7 +116,7 @@ var COMPONENTNAME = 'atto_media',
     TEMPLATES = {
         ROOT: '' +
             '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' +
-                '<ul class="root nav nav-tabs" role="tablist">' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' +
                             '{{get_string "link" component}}' +
@@ -146,17 +146,15 @@ var COMPONENTNAME = 'atto_media',
                 '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="submit" type="submit">{{get_string "createmedia" component}}</button>' +
+                    '<button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button>' +
                 '</div>' +
             '</form>',
         TAB_PANES: {
             LINK: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' +
-                '<label>' +
-                    'Enter name' +
-                    '<input class="fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
-                        'size="32" required="true"/>' +
-                '</label>',
+                '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' +
+                '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
+                        'size="32" required="true"/>',
             VIDEO: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' +
                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
@@ -202,13 +200,19 @@ var COMPONENTNAME = 'atto_media',
         FORM_COMPONENTS: {
             SOURCE: '' +
                 '<div class="{{CSS.SOURCE}} {{id}}">' +
-                    '<label>' +
+                    '<div class="m-b-1">' +
+                        '<label for="url-input">' +
                         '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' +
-                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</a>' +
-                        '<br/>' +
-                        '<input class="{{CSS.URL_INPUT}}" type="url" size="32"/>' +
-                    '</label>' +
-                    '<button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>' +
+                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' +
+                        '</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default openmediabrowser" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
                     '{{#multisource}}' +
                         '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' +
                             ' help=../addsourcehelp}}' +
@@ -231,44 +235,42 @@ var COMPONENTNAME = 'atto_media',
                 '</div>',
             DISPLAY_OPTIONS: '' +
                 '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
-                    '<label>' +
-                        '{{get_string "size" component}}' +
-                        '<div class={{CSS.POSTER_SIZE}}>' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videowidth" component}}</span>' +
-                                '<input type="text" class="{{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                    '<div class="m-b-1">' +
+                        '<label>{{get_string "size" component}}</label>' +
+                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                            '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
+                            '<input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videoheight" component}}</span>' +
-                                '<input type="text" class="{{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                            '<label class="accesshide">{{get_string "videoheight" component}}</label>' +
+                            '<input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
                         '</div>' +
-                    '</label>' +
+                    '</div>' +
                     '<div class="clearfix"></div>' +
                     '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
                 '<div>',
             ADVANCED_SETTINGS: '' +
                 '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
-                    '<label>' +
-                        '<input type="checkbox" checked="true" class="{{CSS.MEDIA_CONTROLS_TOGGLE}}"/>' +
-                        '{{get_string "controls" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_AUTOPLAY_TOGGLE}}"/>' +
-                        '{{get_string "autoplay" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_MUTE_TOGGLE}}"/>' +
-                        '{{get_string "mute" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_LOOP_TOGGLE}}"/>' +
-                        '{{get_string "loop" component}}' +
-                    '</label>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
+                        'id="media-controls-toggle"/>' +
+                        '<label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
+                        'id="media-autoplay-toggle"/>' +
+                        '<label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/>' +
+                        '<label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/>' +
+                        '<label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label>' +
+                    '</div>' +
                 '</div>',
             TRACK_TABS: '' +
-                '<ul class="nav nav-tabs">' +
+                '<ul class="nav nav-tabs mb-3">' +
                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
                             ' role="tab" data-toggle="tab">' +
@@ -330,11 +332,11 @@ var COMPONENTNAME = 'atto_media',
                     '</div>' +
                 '</div>',
             TRACK: '' +
-                '<div class="{{CSS.TRACK}}">' +
+                '<div class="m-b-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<label class="langlabel">' +
-                        '<span>{{get_string "srclang" component}}</span>' +
-                        '<select class="{{CSS.TRACK_LANG_INPUT}}">' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
+                        '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
                                 '{{#langsinstalled}}' +
                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
@@ -344,15 +346,15 @@ var COMPONENTNAME = 'atto_media',
                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
                             '</optgroup>' +
                         '</select>' +
-                    '</label>' +
-                    '<label class="labellabel">' +
-                        '<span>{{get_string "label" component}}</span>' +
-                        '<input class="{{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
-                    '</label>' +
-                    '<label class="defaultlabel">' +
-                        '<input type="checkbox" class="{{CSS.TRACK_DEFAULT_SELECT}}"/>' +
-                        '{{get_string "default" component}}' +
-                    '</label>' +
+                    '</div>' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
+                        '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
+                        '<label class="form-check-label">{{get_string "default" component}}</label>' +
+                    '</div>' +
                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
                 '</div>'
         },
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
index 0049c93a12c..cfdd7c1b1ad 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js
@@ -1,4 +1,4 @@
-YUI.add("moodle-atto_media-button",function(e,t){var n="atto_media",r={LINK:"LINK",VIDEO:"VIDEO",AUDIO:"AUDIO"},i={SUBTITLES:"SUBTITLES",CAPTIONS:"CAPTIONS",DESCRIPTIONS:"DESCRIPTIONS",CHAPTERS:"CHAPTERS",METADATA:"METADATA"},s={SOURCE:"atto_media_source",TRACK:"atto_media_track",MEDIA_SOURCE:"atto_media_media_source",LINK_SOURCE:"atto_media_link_source",POSTER_SOURCE:"atto_media_poster_source",TRACK_SOURCE:"atto_media_track_source",DISPLAY_OPTIONS:"atto_media_display_options",NAME_INPUT:"atto_media_name_entry",URL_INPUT:"atto_media_url_entry",POSTER_SIZE:"atto_media_poster_size",LINK_SIZE:"atto_media_link_size",WIDTH_INPUT:"atto_media_width_entry",HEIGHT_INPUT:"atto_media_height_entry",TRACK_KIND_INPUT:"atto_media_track_kind_entry",TRACK_LABEL_INPUT:"atto_media_track_label_entry",TRACK_LANG_INPUT:"atto_media_track_lang_entry",TRACK_DEFAULT_SELECT:"atto_media_track_default",MEDIA_CONTROLS_TOGGLE:"atto_media_controls",MEDIA_AUTOPLAY_TOGGLE:"atto_media_autoplay",MEDIA_MUTE_TOGGLE:"atto_media_mute",MEDIA_LOOP_TOGGLE:"atto_media_loop",ADVANCED_SETTINGS:"atto_media_advancedsettings",LINK:r.LINK.toLowerCase(),VIDEO:r.VIDEO.toLowerCase(),AUDIO:r.AUDIO.toLowerCase(),TRACK_SUBTITLES:i.SUBTITLES.toLowerCase(),TRACK_CAPTIONS:i.CAPTIONS.toLowerCase(),TRACK_DESCRIPTIONS:i.DESCRIPTIONS.toLowerCase(),TRACK_CHAPTERS:i.CHAPTERS.toLowerCase(),TRACK_METADATA:i.METADATA.toLowerCase()},o={SOURCE:"."+s.SOURCE,TRACK:"."+s.TRACK,MEDIA_SOURCE:"."+s.MEDIA_SOURCE,POSTER_SOURCE:"."+s.POSTER_SOURCE,TRACK_SOURCE:"."+s.TRACK_SOURCE,DISPLAY_OPTIONS:"."+s.DISPLAY_OPTIONS,NAME_INPUT:"."+s.NAME_INPUT,URL_INPUT:"."+s.URL_INPUT,POSTER_SIZE:"."+s.POSTER_SIZE,LINK_SIZE:"."+s.LINK_SIZE,WIDTH_INPUT:"."+s.WIDTH_INPUT,HEIGHT_INPUT:"."+s.HEIGHT_INPUT,TRACK_KIND_INPUT:"."+s.TRACK_KIND_INPUT,TRACK_LABEL_INPUT:"."+s.TRACK_LABEL_INPUT,TRACK_LANG_INPUT:"."+s.TRACK_LANG_INPUT,TRACK_DEFAULT_SELECT:"."+s.TRACK_DEFAULT_SELECT,MEDIA_CONTROLS_TOGGLE:"."+s.MEDIA_CONTROLS_TOGGLE,MEDIA_AUTOPLAY_TOGGLE:"."+s.MEDIA_AUTOPLAY_TOGGLE,MEDIA_MUTE_TOGGLE:"."+s.MEDIA_MUTE_TOGGLE,MEDIA_LOOP_TOGGLE:"."+s.MEDIA_LOOP_TOGGLE,ADVANCED_SETTINGS:"."+s.ADVANCED_SETTINGS,LINK_TAB:'li[data-medium-type="'+s.LINK+'"]',LINK_PANE:'.tab-pane[data-medium-type="'+s.LINK+'"]',VIDEO_TAB:'li[data-medium-type="'+s.VIDEO+'"]',VIDEO_PANE:'.tab-pane[data-medium-type="'+s.VIDEO+'"]',AUDIO_TAB:'li[data-medium-type="'+s.AUDIO+'"]',AUDIO_PANE:'.tab-pane[data-medium-type="'+s.AUDIO+'"]',TRACK_SUBTITLES_TAB:'li[data-track-kind="'+s.TRACK_SUBTITLES+'"]',TRACK_SUBTITLES_PANE:'.tab-pane[data-track-kind="'+s.TRACK_SUBTITLES+'"]',TRACK_CAPTIONS_TAB:'li[data-track-kind="'+s.TRACK_CAPTIONS+'"]',TRACK_CAPTIONS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_CAPTIONS+'"]',TRACK_DESCRIPTIONS_TAB:'li[data-track-kind="'+s.TRACK_DESCRIPTIONS+'"]',TRACK_DESCRIPTIONS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_DESCRIPTIONS+'"]',TRACK_CHAPTERS_TAB:'li[data-track-kind="'+s.TRACK_CHAPTERS+'"]',TRACK_CHAPTERS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_CHAPTERS+'"]',TRACK_METADATA_TAB:'li[data-track-kind="'+s.TRACK_METADATA+'"]',TRACK_METADATA_PANE:'.tab-pane[data-track-kind="'+s.TRACK_METADATA+'"]'},u={ROOT:'<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form"><ul class="root nav nav-tabs" role="tablist"><li data-medium-type="{{CSS.LINK}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">{{get_string "link" component}}</a></li><li data-medium-type="{{CSS.VIDEO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">{{get_string "video" component}}</a></li><li data-medium-type="{{CSS.AUDIO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">{{get_string "audio" component}}</a></li></ul><div class="root tab-content"><div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">{{> tab_panes.link}}</div><div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">{{> tab_panes.video}}</div><div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">{{> tab_panes.audio}}</div></div><div class="mdl-align"><br/><button class="submit" type="submit">{{get_string "createmedia" component}}</button></div></form>',TAB_PANES:{LINK:'{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}<label>Enter name<input class="fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"size="32" required="true"/></label>',VIDEO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options"><input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden"><legend class="ftoggler">{{get_string "displayoptions" component}}</legend><div class="fcontainer">{{> form_components.display_options}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings"><input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden"><legend class="ftoggler">{{get_string "advancedsettings" component}}</legend><div class="fcontainer">{{> form_components.advanced_settings}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks"><input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden"><legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend><div class="fcontainer">{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}</div></fieldset>',AUDIO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings"><input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden"><legend class="ftoggler">{{get_string "advancedsettings" component}}</legend><div class="fcontainer">{{> form_components.advanced_settings}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks"><input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden"><legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend><div class="fcontainer">{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}</div></fieldset>'
-},FORM_COMPONENTS:{SOURCE:'<div class="{{CSS.SOURCE}} {{id}}"><label>{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</a><br/><input class="{{CSS.URL_INPUT}}" type="url" size="32"/></label><button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>{{#multisource}}{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel  help=../addsourcehelp}}{{/multisource}}</div>',ADD_COMPONENT:'<div><a href="#" class="addcomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "add" ../component}}{{/label}}</a>{{#help}}{{{../help}}}{{/help}}</div>',REMOVE_COMPONENT:'<div><a href="#" class="removecomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "remove" ../component}}{{/label}}</a></div>',DISPLAY_OPTIONS:'<div class="{{CSS.DISPLAY_OPTIONS}}"><label>{{get_string "size" component}}<div class={{CSS.POSTER_SIZE}}><label><span class="accesshide">{{get_string "videowidth" component}}</span><input type="text" class="{{CSS.WIDTH_INPUT}} input-mini" size="4"/></label> x <label><span class="accesshide">{{get_string "videoheight" component}}</span><input type="text" class="{{CSS.HEIGHT_INPUT}} input-mini" size="4"/></label></div></label><div class="clearfix"></div>{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}<div>',ADVANCED_SETTINGS:'<div class="{{CSS.ADVANCED_SETTINGS}}"><label><input type="checkbox" checked="true" class="{{CSS.MEDIA_CONTROLS_TOGGLE}}"/>{{get_string "controls" component}}</label><label><input type="checkbox" class="{{CSS.MEDIA_AUTOPLAY_TOGGLE}}"/>{{get_string "autoplay" component}}</label><label><input type="checkbox" class="{{CSS.MEDIA_MUTE_TOGGLE}}"/>{{get_string "mute" component}}</label><label><input type="checkbox" class="{{CSS.MEDIA_LOOP_TOGGLE}}"/>{{get_string "loop" component}}</label></div>',TRACK_TABS:'<ul class="nav nav-tabs"><li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}" role="tab" data-toggle="tab">{{get_string "subtitles" component}}</a></li><li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">{{get_string "captions" component}}</a></li><li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}" role="tab" data-toggle="tab">{{get_string "descriptions" component}}</a></li><li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">{{get_string "chapters" component}}</a></li><li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">{{get_string "metadata" component}}</a></li></ul><div class="tab-content"><div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active" id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"><div class="trackhelp">{{{helpStrings.subtitles}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel" addcomponentlabel="addsubtitlestrack"}}</div><div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}"><div class="trackhelp">{{{helpStrings.captions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel" addcomponentlabel="addcaptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"><div class="trackhelp">{{{helpStrings.descriptions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel" addcomponentlabel="adddescriptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}"><div class="trackhelp">{{{helpStrings.chapters}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel" addcomponentlabel="addchapterstrack"}}</div><div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}"><div class="trackhelp">{{{helpStrings.metadata}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel" addcomponentlabel="addmetadatatrack"}}</div></div>',TRACK:'<div class="{{CSS.TRACK}}">{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}<label class="langlabel"><span>{{get_string "srclang" component}}</span><select class="{{CSS.TRACK_LANG_INPUT}}"><optgroup label="{{get_string "languagesinstalled" component}}">{{#langsinstalled}}<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>{{/langsinstalled}}</optgroup><optgroup label="{{get_string "languagesavailable" component}} ">{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}</optgroup></select></label><label class="labellabel"><span>{{get_string "label" component}}</span><input class="{{CSS.TRACK_LABEL_INPUT}}" type="text"/></label><label class="defaultlabel"><input type="checkbox" class="{{CSS.TRACK_DEFAULT_SELECT}}"/>{{get_string "default" component}}</label>{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}</div>'},HTML_MEDIA:{VIDEO:'&nbsp;<video {{#width}}width="{{../width}}" {{/width}}{{#height}}height="{{../height}}" {{/height}}{{#poster}}poster="{{../poster}}" {{/poster}}{{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</video>&nbsp'
-,AUDIO:'&nbsp;<audio {{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</audio>&nbsp',LINK:'<a href="{{url}}" {{#width}}data-width="{{../width}}" {{/width}}{{#height}}data-height="{{../height}}"{{/height}}>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'}};e.namespace("M.atto_media").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.get("host").canShowFilepicker("media")&&(this.editor.delegate("dblclick",this._displayDialogue,"video",this),this.editor.delegate("click",this._handleClick,"video",this),this.addButton({icon:"e/insert_edit_video",callback:this._displayDialogue,tags:"video, audio",tagMatchRequiresAll:!1}))},_getContext:function(t){return e.merge({elementid:this.get("host").get("elementid"),component:n,langsinstalled:this.get("langs").installed,langsavailable:this.get("langs").available,helpStrings:this.get("help"),CSS:s},t)},_handleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){if(this.get("host").getSelection()===!1)return;"renderPartial"in e.Handlebars.helpers||(function r(t,n){e.each(n,function(n,i){t.push(i),typeof n!="object"?e.Handlebars.registerPartial(t.join(".").toLowerCase(),n):r(t,n),t.pop()})}([],u),e.Handlebars.registerHelper("renderPartial",function(t,n){if(!t)return"";var r=e.Handlebars.partials[t],i=n.hash.context?e.clone(n.hash.context):{},s=e.merge(i,n.hash);return delete s.context,r?new e.Handlebars.SafeString(e.Handlebars.compile(r)(s)):""}));var t=this.getDialogue({headerContent:M.util.get_string("createmedia",n),focusAfterHide:!0,width:660,focusOnShowSelector:o.URL_INPUT});t.set("bodyContent",this._getDialogueContent(this.get("host").getSelection())).show(),M.form.shortforms({formid:this.get("host").get("elementid")+"_atto_media_form"})},_getDialogueContent:function(t){var n=e.Node.create(e.Handlebars.compile(u.ROOT)(this._getContext())),r=this.get("host").getSelectedNodes().filter("video,audio").shift(),i=r?this._getMediumProperties(r):!1;return this._attachEvents(this._applyMediumProperties(n,i),t)},_attachEvents:function(e,t){return e.delegate("click",function(e){e.preventDefault(),this._addMediaSourceComponent(e.currentTarget)},o.MEDIA_SOURCE+" .addcomponent",this),e.delegate("click",function(e){e.preventDefault(),this._addTrackComponent(e.currentTarget)},o.TRACK+" .addcomponent",this),e.delegate("click",function(e){var t=e.currentTarget;if(t.get("checked")){var n=function(e){return this._getTrackTypeFromTabPane(e.ancestor(".tab-pane"))}.bind(this);t.ancestor(".root.tab-content").all(o.TRACK_DEFAULT_SELECT).each(function(e){e!==t&&n(t)===n(e)&&e.set("checked",!1)})}},o.TRACK_DEFAULT_SELECT,this),e.delegate("click",function(e){var t=e.currentTarget,n=t.ancestor(o.POSTER_SOURCE)&&"image"||t.ancestor(o.TRACK_SOURCE)&&"subtitle"||"media";e.preventDefault(),this.get("host").showFilepicker(n,this._getFilepickerCallback(t,n),this)},".openmediabrowser",this),e.all(".nav-item").on("click",function(e){e.currentTarget.get("parentNode").all(".active").removeClass("active")}),e.one(".submit").on("click",function(e){e.preventDefault();var n=this._getMediaHTML(e.currentTarget.ancestor(".atto_form")),r=this.get("host");this.getDialogue({focusAfterHide:null}).hide(),n&&(r.setSelection(t),r.insertContentAtFocusPoint(n),this.markUpdated())},this),e},_applyMediumProperties:function(t,n){if(!n)return t;var r=function(e,t){e.one(o.TRACK_SOURCE+" "+o.URL_INPUT).set("value",t.src),e.one(o.TRACK_LANG_INPUT).set("value",t.srclang),e.one(o.TRACK_LABEL_INPUT).set("value",t.label),e.one(o.TRACK_DEFAULT_SELECT).set("checked",t.defaultTrack)},i=t.one(".root.tab-content > .tab-pane#"+this.get("host").get("elementid")+"_"+n.type.toLowerCase());i.one(o.MEDIA_SOURCE+" "+o.URL_INPUT).set("value",n.sources[0]),e.Array.each(n.sources.slice(1),function(e){this._addMediaSourceComponent(i.one(o.MEDIA_SOURCE+" .addcomponent"),function(t){t.one(o.URL_INPUT).set("value",e)})},this),e.Object.each(n.tracks,function(t,n){var s=t.length?t:[{src:"",srclang:"",label:"",defaultTrack:!1}],u=o["TRACK_"+n.toUpperCase()+"_PANE"];r(i.one(u+" "+o.TRACK),s[0]),e.Array.each(s.slice(1),function(e){this._addTrackComponent(i.one(u+" "+o.TRACK+" .addcomponent"),function(t){r(t,e)})},this)},this),i.one(o.POSTER_SOURCE+" "+o.URL_INPUT).setAttribute("value",n.poster),i.one(o.WIDTH_INPUT).set("value",n.width),i.one(o.HEIGHT_INPUT).set("value",n.height),i.one(o.MEDIA_CONTROLS_TOGGLE).set("checked",n.controls),i.one(o.MEDIA_AUTOPLAY_TOGGLE).set("checked",n.autoplay),i.one(o.MEDIA_MUTE_TOGGLE).set("checked",n.muted),i.one(o.MEDIA_LOOP_TOGGLE).set("checked",n.loop);var s=this._getMediumTypeFromTabPane(i);return i.siblings(".active").removeClass("active"),t.all(".root.nav-tabs .nav-item a").removeClass("active"),i.addClass("active"),t.one(o[s.toUpperCase()+"_TAB"]+" a").addClass("active"),t},_getMediumProperties:function(e){var t=function(e,t){return e.getAttribute(t)?!0:!1},n={subtitles:[],captions:[],descriptions:[],chapters:[],metadata:[]};return e.all("track").each(function(e){n[e.getAttribute("kind")].push({src:e.getAttribute("src"),srclang:e.getAttribute("srclang"),label:e.getAttribute("label"),defaultTrack:t(e,"default")})}),{type:e.test("video")?r.VIDEO:r.AUDIO,sources:e.all("source").get("src"),poster:e.getAttribute("poster"),width:e.getAttribute("width"),height:e.getAttribute("height"),autoplay:t(e,"autoplay"),loop:t(e,"loop"),muted:t(e,"muted"),controls:t(e,"controls"),tracks:n}},_addTrackComponent:function(e,t){var n=this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),r=this._getContext
-({sourcelabel:n+"sourcelabel",addcomponentlabel:"add"+n+"track"});this._addComponent(e,u.FORM_COMPONENTS.TRACK,o.TRACK,r,t)},_addMediaSourceComponent:function(e,t){var n=this._getMediumTypeFromTabPane(e.ancestor(".tab-pane")),r=this._getContext({multisource:!0,id:s.MEDIA_SOURCE,entersourcelabel:n+"sourcelabel",addcomponentlabel:"addsource",addsourcehelp:this.get("help").addsource});this._addComponent(e,u.FORM_COMPONENTS.SOURCE,o.MEDIA_SOURCE,r,t)},_addComponent:function(t,n,r,i,s){var o=t.ancestor(r),a=e.Node.create(e.Handlebars.compile(n)(i)),f=this._getContext(i);f.label="remove";var l=e.Node.create(e.Handlebars.compile(u.FORM_COMPONENTS.REMOVE_COMPONENT)(f));l.one(".removecomponent").on("click",function(e){e.preventDefault(),o.remove(!0)}),o.insert(a,"after"),t.ancestor().insert(l,"after"),t.ancestor().remove(!0),s&&s.call(this,a)},_getFilepickerCallback:function(e,t){return function(n){if(n.url!==""){var r=e.ancestor(".tab-pane");e.ancestor(o.SOURCE).one(o.URL_INPUT).set("value",n.url),r.get("id")===this.get("host").get("elementid")+"_"+s.LINK&&r.one(o.NAME_INPUT).set("value",n.file);if(t==="subtitle"){var i=n.file.split(".vtt")[0].split("-").slice(-1)[0],u=this.get("langs").available.reduce(function(e,t){return t.code===i?t:e},!1);u&&(e.ancestor(o.TRACK).one(o.TRACK_LABEL_INPUT).set("value",u.lang.substr(0,u.lang.lastIndexOf(" "))),e.ancestor(o.TRACK).one(o.TRACK_LANG_INPUT).set("value",u.code))}}}},_getMediumTypeFromTabPane:function(e){return e.getAttribute("data-medium-type")},_getTrackTypeFromTabPane:function(e){return e.getAttribute("data-track-kind")},_getMediaHTML:function(e){var t=this._getMediumTypeFromTabPane(e.one(".root.tab-content > .tab-pane.active")),n=e.one(o[t.toUpperCase()+"_PANE"]);return this["_getMediaHTML"+t[0].toUpperCase()+t.substr(1)](n)},_getMediaHTMLLink:function(t){var n={url:t.one(o.URL_INPUT).get("value"),name:t.one(o.NAME_INPUT).get("value")||!1};return n.url?e.Handlebars.compile(u.HTML_MEDIA.LINK)(n):""},_getMediaHTMLVideo:function(t){var n=this._getContextForMediaHTML(t);return n.width=t.one(o.WIDTH_INPUT).get("value")||!1,n.height=t.one(o.HEIGHT_INPUT).get("value")||!1,n.poster=t.one(o.POSTER_SOURCE+" "+o.URL_INPUT).get("value")||!1,n.sources.length?e.Handlebars.compile(u.HTML_MEDIA.VIDEO)(n):""},_getMediaHTMLAudio:function(t){var n=this._getContextForMediaHTML(t);return n.sources.length?e.Handlebars.compile(u.HTML_MEDIA.AUDIO)(n):""},_getContextForMediaHTML:function(e){var t=[];return e.all(o.TRACK).each(function(e){t.push({track:e.one(o.TRACK_SOURCE+" "+o.URL_INPUT).get("value"),kind:this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),label:e.one(o.TRACK_LABEL_INPUT).get("value")||e.one(o.TRACK_LANG_INPUT).get("value"),srclang:e.one(o.TRACK_LANG_INPUT).get("value"),defaultTrack:e.one(o.TRACK_DEFAULT_SELECT).get("checked")?"true":null})},this),{sources:e.all(o.MEDIA_SOURCE+" "+o.URL_INPUT).get("value").filter(function(e){return!!e}).map(function(e){return{source:e}}),description:e.one(o.MEDIA_SOURCE+" "+o.URL_INPUT).get("value")||!1,tracks:t.filter(function(e){return!!e.track}),showControls:e.one(o.MEDIA_CONTROLS_TOGGLE).get("checked"),autoplay:e.one(o.MEDIA_AUTOPLAY_TOGGLE).get("checked"),muted:e.one(o.MEDIA_MUTE_TOGGLE).get("checked"),loop:e.one(o.MEDIA_LOOP_TOGGLE).get("checked")}}},{ATTRS:{langs:{},help:{}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-form-shortforms"]});
+YUI.add("moodle-atto_media-button",function(e,t){var n="atto_media",r={LINK:"LINK",VIDEO:"VIDEO",AUDIO:"AUDIO"},i={SUBTITLES:"SUBTITLES",CAPTIONS:"CAPTIONS",DESCRIPTIONS:"DESCRIPTIONS",CHAPTERS:"CHAPTERS",METADATA:"METADATA"},s={SOURCE:"atto_media_source",TRACK:"atto_media_track",MEDIA_SOURCE:"atto_media_media_source",LINK_SOURCE:"atto_media_link_source",POSTER_SOURCE:"atto_media_poster_source",TRACK_SOURCE:"atto_media_track_source",DISPLAY_OPTIONS:"atto_media_display_options",NAME_INPUT:"atto_media_name_entry",URL_INPUT:"atto_media_url_entry",POSTER_SIZE:"atto_media_poster_size",LINK_SIZE:"atto_media_link_size",WIDTH_INPUT:"atto_media_width_entry",HEIGHT_INPUT:"atto_media_height_entry",TRACK_KIND_INPUT:"atto_media_track_kind_entry",TRACK_LABEL_INPUT:"atto_media_track_label_entry",TRACK_LANG_INPUT:"atto_media_track_lang_entry",TRACK_DEFAULT_SELECT:"atto_media_track_default",MEDIA_CONTROLS_TOGGLE:"atto_media_controls",MEDIA_AUTOPLAY_TOGGLE:"atto_media_autoplay",MEDIA_MUTE_TOGGLE:"atto_media_mute",MEDIA_LOOP_TOGGLE:"atto_media_loop",ADVANCED_SETTINGS:"atto_media_advancedsettings",LINK:r.LINK.toLowerCase(),VIDEO:r.VIDEO.toLowerCase(),AUDIO:r.AUDIO.toLowerCase(),TRACK_SUBTITLES:i.SUBTITLES.toLowerCase(),TRACK_CAPTIONS:i.CAPTIONS.toLowerCase(),TRACK_DESCRIPTIONS:i.DESCRIPTIONS.toLowerCase(),TRACK_CHAPTERS:i.CHAPTERS.toLowerCase(),TRACK_METADATA:i.METADATA.toLowerCase()},o={SOURCE:"."+s.SOURCE,TRACK:"."+s.TRACK,MEDIA_SOURCE:"."+s.MEDIA_SOURCE,POSTER_SOURCE:"."+s.POSTER_SOURCE,TRACK_SOURCE:"."+s.TRACK_SOURCE,DISPLAY_OPTIONS:"."+s.DISPLAY_OPTIONS,NAME_INPUT:"."+s.NAME_INPUT,URL_INPUT:"."+s.URL_INPUT,POSTER_SIZE:"."+s.POSTER_SIZE,LINK_SIZE:"."+s.LINK_SIZE,WIDTH_INPUT:"."+s.WIDTH_INPUT,HEIGHT_INPUT:"."+s.HEIGHT_INPUT,TRACK_KIND_INPUT:"."+s.TRACK_KIND_INPUT,TRACK_LABEL_INPUT:"."+s.TRACK_LABEL_INPUT,TRACK_LANG_INPUT:"."+s.TRACK_LANG_INPUT,TRACK_DEFAULT_SELECT:"."+s.TRACK_DEFAULT_SELECT,MEDIA_CONTROLS_TOGGLE:"."+s.MEDIA_CONTROLS_TOGGLE,MEDIA_AUTOPLAY_TOGGLE:"."+s.MEDIA_AUTOPLAY_TOGGLE,MEDIA_MUTE_TOGGLE:"."+s.MEDIA_MUTE_TOGGLE,MEDIA_LOOP_TOGGLE:"."+s.MEDIA_LOOP_TOGGLE,ADVANCED_SETTINGS:"."+s.ADVANCED_SETTINGS,LINK_TAB:'li[data-medium-type="'+s.LINK+'"]',LINK_PANE:'.tab-pane[data-medium-type="'+s.LINK+'"]',VIDEO_TAB:'li[data-medium-type="'+s.VIDEO+'"]',VIDEO_PANE:'.tab-pane[data-medium-type="'+s.VIDEO+'"]',AUDIO_TAB:'li[data-medium-type="'+s.AUDIO+'"]',AUDIO_PANE:'.tab-pane[data-medium-type="'+s.AUDIO+'"]',TRACK_SUBTITLES_TAB:'li[data-track-kind="'+s.TRACK_SUBTITLES+'"]',TRACK_SUBTITLES_PANE:'.tab-pane[data-track-kind="'+s.TRACK_SUBTITLES+'"]',TRACK_CAPTIONS_TAB:'li[data-track-kind="'+s.TRACK_CAPTIONS+'"]',TRACK_CAPTIONS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_CAPTIONS+'"]',TRACK_DESCRIPTIONS_TAB:'li[data-track-kind="'+s.TRACK_DESCRIPTIONS+'"]',TRACK_DESCRIPTIONS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_DESCRIPTIONS+'"]',TRACK_CHAPTERS_TAB:'li[data-track-kind="'+s.TRACK_CHAPTERS+'"]',TRACK_CHAPTERS_PANE:'.tab-pane[data-track-kind="'+s.TRACK_CHAPTERS+'"]',TRACK_METADATA_TAB:'li[data-track-kind="'+s.TRACK_METADATA+'"]',TRACK_METADATA_PANE:'.tab-pane[data-track-kind="'+s.TRACK_METADATA+'"]'},u={ROOT:'<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form"><ul class="root nav nav-tabs m-b-1" role="tablist"><li data-medium-type="{{CSS.LINK}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">{{get_string "link" component}}</a></li><li data-medium-type="{{CSS.VIDEO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">{{get_string "video" component}}</a></li><li data-medium-type="{{CSS.AUDIO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">{{get_string "audio" component}}</a></li></ul><div class="root tab-content"><div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">{{> tab_panes.link}}</div><div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">{{> tab_panes.video}}</div><div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">{{> tab_panes.audio}}</div></div><div class="mdl-align"><br/><button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button></div></form>',TAB_PANES:{LINK:'{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label><input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"size="32" required="true"/>',VIDEO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options"><input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden"><legend class="ftoggler">{{get_string "displayoptions" component}}</legend><div class="fcontainer">{{> form_components.display_options}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings"><input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden"><legend class="ftoggler">{{get_string "advancedsettings" component}}</legend><div class="fcontainer">{{> form_components.advanced_settings}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks"><input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden"><legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend><div class="fcontainer">{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}</div></fieldset>',AUDIO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings"><input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden"><legend class="ftoggler">{{get_string "advancedsettings" component}}</legend><div class="fcontainer">{{> form_components.advanced_settings}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks"><input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden"><legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend><div class="fcontainer">{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}</div></fieldset>'
+},FORM_COMPONENTS:{SOURCE:'<div class="{{CSS.SOURCE}} {{id}}"><div class="m-b-1"><label for="url-input">{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</label><div class="input-group input-append w-100"><input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/><span class="input-group-append"><button class="btn btn-default openmediabrowser" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{#multisource}}{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel  help=../addsourcehelp}}{{/multisource}}</div>',ADD_COMPONENT:'<div><a href="#" class="addcomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "add" ../component}}{{/label}}</a>{{#help}}{{{../help}}}{{/help}}</div>',REMOVE_COMPONENT:'<div><a href="#" class="removecomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "remove" ../component}}{{/label}}</a></div>',DISPLAY_OPTIONS:'<div class="{{CSS.DISPLAY_OPTIONS}}"><div class="m-b-1"><label>{{get_string "size" component}}</label><div class="form-inline {{CSS.POSTER_SIZE}}"><label class="accesshide">{{get_string "videowidth" component}}</label><input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/> x <label class="accesshide">{{get_string "videoheight" component}}</label><input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/></div></div><div class="clearfix"></div>{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}<div>',ADVANCED_SETTINGS:'<div class="{{CSS.ADVANCED_SETTINGS}}"><div class="form-check"><input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"id="media-controls-toggle"/><label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"id="media-autoplay-toggle"/><label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/><label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/><label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label></div></div>',TRACK_TABS:'<ul class="nav nav-tabs mb-3"><li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}" role="tab" data-toggle="tab">{{get_string "subtitles" component}}</a></li><li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">{{get_string "captions" component}}</a></li><li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}" role="tab" data-toggle="tab">{{get_string "descriptions" component}}</a></li><li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">{{get_string "chapters" component}}</a></li><li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">{{get_string "metadata" component}}</a></li></ul><div class="tab-content"><div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active" id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"><div class="trackhelp">{{{helpStrings.subtitles}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel" addcomponentlabel="addsubtitlestrack"}}</div><div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}"><div class="trackhelp">{{{helpStrings.captions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel" addcomponentlabel="addcaptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"><div class="trackhelp">{{{helpStrings.descriptions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel" addcomponentlabel="adddescriptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}"><div class="trackhelp">{{{helpStrings.chapters}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel" addcomponentlabel="addchapterstrack"}}</div><div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}"><div class="trackhelp">{{{helpStrings.metadata}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel" addcomponentlabel="addmetadatatrack"}}</div></div>',TRACK:'<div class="m-b-1 {{CSS.TRACK}}">{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}<div class="form-group"><label class="w-100" for="lang-input">{{get_string "srclang" component}}</label><select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}"><optgroup label="{{get_string "languagesinstalled" component}}">{{#langsinstalled}}<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>{{/langsinstalled}}</optgroup><optgroup label="{{get_string "languagesavailable" component}} ">{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}</optgroup></select></div><div class="form-group"><label class="w-100" for="track-input">{{get_string "label" component}}</label><input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/><label class="form-check-label">{{get_string "default" component}}</label></div>{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}</div>'
+},HTML_MEDIA:{VIDEO:'&nbsp;<video {{#width}}width="{{../width}}" {{/width}}{{#height}}height="{{../height}}" {{/height}}{{#poster}}poster="{{../poster}}" {{/poster}}{{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</video>&nbsp',AUDIO:'&nbsp;<audio {{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</audio>&nbsp',LINK:'<a href="{{url}}" {{#width}}data-width="{{../width}}" {{/width}}{{#height}}data-height="{{../height}}"{{/height}}>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'}};e.namespace("M.atto_media").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.get("host").canShowFilepicker("media")&&(this.editor.delegate("dblclick",this._displayDialogue,"video",this),this.editor.delegate("click",this._handleClick,"video",this),this.addButton({icon:"e/insert_edit_video",callback:this._displayDialogue,tags:"video, audio",tagMatchRequiresAll:!1}))},_getContext:function(t){return e.merge({elementid:this.get("host").get("elementid"),component:n,langsinstalled:this.get("langs").installed,langsavailable:this.get("langs").available,helpStrings:this.get("help"),CSS:s},t)},_handleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){if(this.get("host").getSelection()===!1)return;"renderPartial"in e.Handlebars.helpers||(function r(t,n){e.each(n,function(n,i){t.push(i),typeof n!="object"?e.Handlebars.registerPartial(t.join(".").toLowerCase(),n):r(t,n),t.pop()})}([],u),e.Handlebars.registerHelper("renderPartial",function(t,n){if(!t)return"";var r=e.Handlebars.partials[t],i=n.hash.context?e.clone(n.hash.context):{},s=e.merge(i,n.hash);return delete s.context,r?new e.Handlebars.SafeString(e.Handlebars.compile(r)(s)):""}));var t=this.getDialogue({headerContent:M.util.get_string("createmedia",n),focusAfterHide:!0,width:660,focusOnShowSelector:o.URL_INPUT});t.set("bodyContent",this._getDialogueContent(this.get("host").getSelection())).show(),M.form.shortforms({formid:this.get("host").get("elementid")+"_atto_media_form"})},_getDialogueContent:function(t){var n=e.Node.create(e.Handlebars.compile(u.ROOT)(this._getContext())),r=this.get("host").getSelectedNodes().filter("video,audio").shift(),i=r?this._getMediumProperties(r):!1;return this._attachEvents(this._applyMediumProperties(n,i),t)},_attachEvents:function(e,t){return e.delegate("click",function(e){e.preventDefault(),this._addMediaSourceComponent(e.currentTarget)},o.MEDIA_SOURCE+" .addcomponent",this),e.delegate("click",function(e){e.preventDefault(),this._addTrackComponent(e.currentTarget)},o.TRACK+" .addcomponent",this),e.delegate("click",function(e){var t=e.currentTarget;if(t.get("checked")){var n=function(e){return this._getTrackTypeFromTabPane(e.ancestor(".tab-pane"))}.bind(this);t.ancestor(".root.tab-content").all(o.TRACK_DEFAULT_SELECT).each(function(e){e!==t&&n(t)===n(e)&&e.set("checked",!1)})}},o.TRACK_DEFAULT_SELECT,this),e.delegate("click",function(e){var t=e.currentTarget,n=t.ancestor(o.POSTER_SOURCE)&&"image"||t.ancestor(o.TRACK_SOURCE)&&"subtitle"||"media";e.preventDefault(),this.get("host").showFilepicker(n,this._getFilepickerCallback(t,n),this)},".openmediabrowser",this),e.all(".nav-item").on("click",function(e){e.currentTarget.get("parentNode").all(".active").removeClass("active")}),e.one(".submit").on("click",function(e){e.preventDefault();var n=this._getMediaHTML(e.currentTarget.ancestor(".atto_form")),r=this.get("host");this.getDialogue({focusAfterHide:null}).hide(),n&&(r.setSelection(t),r.insertContentAtFocusPoint(n),this.markUpdated())},this),e},_applyMediumProperties:function(t,n){if(!n)return t;var r=function(e,t){e.one(o.TRACK_SOURCE+" "+o.URL_INPUT).set("value",t.src),e.one(o.TRACK_LANG_INPUT).set("value",t.srclang),e.one(o.TRACK_LABEL_INPUT).set("value",t.label),e.one(o.TRACK_DEFAULT_SELECT).set("checked",t.defaultTrack)},i=t.one(".root.tab-content > .tab-pane#"+this.get("host").get("elementid")+"_"+n.type.toLowerCase());i.one(o.MEDIA_SOURCE+" "+o.URL_INPUT).set("value",n.sources[0]),e.Array.each(n.sources.slice(1),function(e){this._addMediaSourceComponent(i.one(o.MEDIA_SOURCE+" .addcomponent"),function(t){t.one(o.URL_INPUT).set("value",e)})},this),e.Object.each(n.tracks,function(t,n){var s=t.length?t:[{src:"",srclang:"",label:"",defaultTrack:!1}],u=o["TRACK_"+n.toUpperCase()+"_PANE"];r(i.one(u+" "+o.TRACK),s[0]),e.Array.each(s.slice(1),function(e){this._addTrackComponent(i.one(u+" "+o.TRACK+" .addcomponent"),function(t){r(t,e)})},this)},this),i.one(o.POSTER_SOURCE+" "+o.URL_INPUT).setAttribute("value",n.poster),i.one(o.WIDTH_INPUT).set("value",n.width),i.one(o.HEIGHT_INPUT).set("value",n.height),i.one(o.MEDIA_CONTROLS_TOGGLE).set("checked",n.controls),i.one(o.MEDIA_AUTOPLAY_TOGGLE).set("checked",n.autoplay),i.one(o.MEDIA_MUTE_TOGGLE).set("checked",n.muted),i.one(o.MEDIA_LOOP_TOGGLE).set("checked",n.loop);var s=this._getMediumTypeFromTabPane(i);return i.siblings(".active").removeClass("active"),t.all(".root.nav-tabs .nav-item a").removeClass("active"),i.addClass("active"),t.one(o[s.toUpperCase()+"_TAB"]+" a").addClass("active"),t},_getMediumProperties:function(e){var t=function(e,t){return e.getAttribute(t)?!0:!1},n={subtitles:[],captions:[],descriptions:[],chapters
+:[],metadata:[]};return e.all("track").each(function(e){n[e.getAttribute("kind")].push({src:e.getAttribute("src"),srclang:e.getAttribute("srclang"),label:e.getAttribute("label"),defaultTrack:t(e,"default")})}),{type:e.test("video")?r.VIDEO:r.AUDIO,sources:e.all("source").get("src"),poster:e.getAttribute("poster"),width:e.getAttribute("width"),height:e.getAttribute("height"),autoplay:t(e,"autoplay"),loop:t(e,"loop"),muted:t(e,"muted"),controls:t(e,"controls"),tracks:n}},_addTrackComponent:function(e,t){var n=this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),r=this._getContext({sourcelabel:n+"sourcelabel",addcomponentlabel:"add"+n+"track"});this._addComponent(e,u.FORM_COMPONENTS.TRACK,o.TRACK,r,t)},_addMediaSourceComponent:function(e,t){var n=this._getMediumTypeFromTabPane(e.ancestor(".tab-pane")),r=this._getContext({multisource:!0,id:s.MEDIA_SOURCE,entersourcelabel:n+"sourcelabel",addcomponentlabel:"addsource",addsourcehelp:this.get("help").addsource});this._addComponent(e,u.FORM_COMPONENTS.SOURCE,o.MEDIA_SOURCE,r,t)},_addComponent:function(t,n,r,i,s){var o=t.ancestor(r),a=e.Node.create(e.Handlebars.compile(n)(i)),f=this._getContext(i);f.label="remove";var l=e.Node.create(e.Handlebars.compile(u.FORM_COMPONENTS.REMOVE_COMPONENT)(f));l.one(".removecomponent").on("click",function(e){e.preventDefault(),o.remove(!0)}),o.insert(a,"after"),t.ancestor().insert(l,"after"),t.ancestor().remove(!0),s&&s.call(this,a)},_getFilepickerCallback:function(e,t){return function(n){if(n.url!==""){var r=e.ancestor(".tab-pane");e.ancestor(o.SOURCE).one(o.URL_INPUT).set("value",n.url),r.get("id")===this.get("host").get("elementid")+"_"+s.LINK&&r.one(o.NAME_INPUT).set("value",n.file);if(t==="subtitle"){var i=n.file.split(".vtt")[0].split("-").slice(-1)[0],u=this.get("langs").available.reduce(function(e,t){return t.code===i?t:e},!1);u&&(e.ancestor(o.TRACK).one(o.TRACK_LABEL_INPUT).set("value",u.lang.substr(0,u.lang.lastIndexOf(" "))),e.ancestor(o.TRACK).one(o.TRACK_LANG_INPUT).set("value",u.code))}}}},_getMediumTypeFromTabPane:function(e){return e.getAttribute("data-medium-type")},_getTrackTypeFromTabPane:function(e){return e.getAttribute("data-track-kind")},_getMediaHTML:function(e){var t=this._getMediumTypeFromTabPane(e.one(".root.tab-content > .tab-pane.active")),n=e.one(o[t.toUpperCase()+"_PANE"]);return this["_getMediaHTML"+t[0].toUpperCase()+t.substr(1)](n)},_getMediaHTMLLink:function(t){var n={url:t.one(o.URL_INPUT).get("value"),name:t.one(o.NAME_INPUT).get("value")||!1};return n.url?e.Handlebars.compile(u.HTML_MEDIA.LINK)(n):""},_getMediaHTMLVideo:function(t){var n=this._getContextForMediaHTML(t);return n.width=t.one(o.WIDTH_INPUT).get("value")||!1,n.height=t.one(o.HEIGHT_INPUT).get("value")||!1,n.poster=t.one(o.POSTER_SOURCE+" "+o.URL_INPUT).get("value")||!1,n.sources.length?e.Handlebars.compile(u.HTML_MEDIA.VIDEO)(n):""},_getMediaHTMLAudio:function(t){var n=this._getContextForMediaHTML(t);return n.sources.length?e.Handlebars.compile(u.HTML_MEDIA.AUDIO)(n):""},_getContextForMediaHTML:function(e){var t=[];return e.all(o.TRACK).each(function(e){t.push({track:e.one(o.TRACK_SOURCE+" "+o.URL_INPUT).get("value"),kind:this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),label:e.one(o.TRACK_LABEL_INPUT).get("value")||e.one(o.TRACK_LANG_INPUT).get("value"),srclang:e.one(o.TRACK_LANG_INPUT).get("value"),defaultTrack:e.one(o.TRACK_DEFAULT_SELECT).get("checked")?"true":null})},this),{sources:e.all(o.MEDIA_SOURCE+" "+o.URL_INPUT).get("value").filter(function(e){return!!e}).map(function(e){return{source:e}}),description:e.one(o.MEDIA_SOURCE+" "+o.URL_INPUT).get("value")||!1,tracks:t.filter(function(e){return!!e.track}),showControls:e.one(o.MEDIA_CONTROLS_TOGGLE).get("checked"),autoplay:e.one(o.MEDIA_AUTOPLAY_TOGGLE).get("checked"),muted:e.one(o.MEDIA_MUTE_TOGGLE).get("checked"),loop:e.one(o.MEDIA_LOOP_TOGGLE).get("checked")}}},{ATTRS:{langs:{},help:{}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-form-shortforms"]});
diff --git a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
index 603896a0d14..541685a4549 100644
--- a/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
+++ b/lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js
@@ -116,7 +116,7 @@ var COMPONENTNAME = 'atto_media',
     TEMPLATES = {
         ROOT: '' +
             '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' +
-                '<ul class="root nav nav-tabs" role="tablist">' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' +
                             '{{get_string "link" component}}' +
@@ -146,17 +146,15 @@ var COMPONENTNAME = 'atto_media',
                 '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="submit" type="submit">{{get_string "createmedia" component}}</button>' +
+                    '<button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button>' +
                 '</div>' +
             '</form>',
         TAB_PANES: {
             LINK: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' +
-                '<label>' +
-                    'Enter name' +
-                    '<input class="fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
-                        'size="32" required="true"/>' +
-                '</label>',
+                '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' +
+                '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
+                        'size="32" required="true"/>',
             VIDEO: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' +
                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
@@ -202,13 +200,19 @@ var COMPONENTNAME = 'atto_media',
         FORM_COMPONENTS: {
             SOURCE: '' +
                 '<div class="{{CSS.SOURCE}} {{id}}">' +
-                    '<label>' +
+                    '<div class="m-b-1">' +
+                        '<label for="url-input">' +
                         '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' +
-                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</a>' +
-                        '<br/>' +
-                        '<input class="{{CSS.URL_INPUT}}" type="url" size="32"/>' +
-                    '</label>' +
-                    '<button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>' +
+                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' +
+                        '</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default openmediabrowser" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
                     '{{#multisource}}' +
                         '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' +
                             ' help=../addsourcehelp}}' +
@@ -231,44 +235,42 @@ var COMPONENTNAME = 'atto_media',
                 '</div>',
             DISPLAY_OPTIONS: '' +
                 '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
-                    '<label>' +
-                        '{{get_string "size" component}}' +
-                        '<div class={{CSS.POSTER_SIZE}}>' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videowidth" component}}</span>' +
-                                '<input type="text" class="{{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                    '<div class="m-b-1">' +
+                        '<label>{{get_string "size" component}}</label>' +
+                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                            '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
+                            '<input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videoheight" component}}</span>' +
-                                '<input type="text" class="{{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                            '<label class="accesshide">{{get_string "videoheight" component}}</label>' +
+                            '<input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
                         '</div>' +
-                    '</label>' +
+                    '</div>' +
                     '<div class="clearfix"></div>' +
                     '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
                 '<div>',
             ADVANCED_SETTINGS: '' +
                 '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
-                    '<label>' +
-                        '<input type="checkbox" checked="true" class="{{CSS.MEDIA_CONTROLS_TOGGLE}}"/>' +
-                        '{{get_string "controls" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_AUTOPLAY_TOGGLE}}"/>' +
-                        '{{get_string "autoplay" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_MUTE_TOGGLE}}"/>' +
-                        '{{get_string "mute" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_LOOP_TOGGLE}}"/>' +
-                        '{{get_string "loop" component}}' +
-                    '</label>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
+                        'id="media-controls-toggle"/>' +
+                        '<label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
+                        'id="media-autoplay-toggle"/>' +
+                        '<label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/>' +
+                        '<label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/>' +
+                        '<label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label>' +
+                    '</div>' +
                 '</div>',
             TRACK_TABS: '' +
-                '<ul class="nav nav-tabs">' +
+                '<ul class="nav nav-tabs mb-3">' +
                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
                             ' role="tab" data-toggle="tab">' +
@@ -330,11 +332,11 @@ var COMPONENTNAME = 'atto_media',
                     '</div>' +
                 '</div>',
             TRACK: '' +
-                '<div class="{{CSS.TRACK}}">' +
+                '<div class="m-b-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<label class="langlabel">' +
-                        '<span>{{get_string "srclang" component}}</span>' +
-                        '<select class="{{CSS.TRACK_LANG_INPUT}}">' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
+                        '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
                                 '{{#langsinstalled}}' +
                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
@@ -344,15 +346,15 @@ var COMPONENTNAME = 'atto_media',
                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
                             '</optgroup>' +
                         '</select>' +
-                    '</label>' +
-                    '<label class="labellabel">' +
-                        '<span>{{get_string "label" component}}</span>' +
-                        '<input class="{{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
-                    '</label>' +
-                    '<label class="defaultlabel">' +
-                        '<input type="checkbox" class="{{CSS.TRACK_DEFAULT_SELECT}}"/>' +
-                        '{{get_string "default" component}}' +
-                    '</label>' +
+                    '</div>' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
+                        '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
+                        '<label class="form-check-label">{{get_string "default" component}}</label>' +
+                    '</div>' +
                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
                 '</div>'
         },
diff --git a/lib/editor/atto/plugins/media/yui/src/button/js/button.js b/lib/editor/atto/plugins/media/yui/src/button/js/button.js
index f5a63c02560..b406076b9c9 100644
--- a/lib/editor/atto/plugins/media/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/media/yui/src/button/js/button.js
@@ -114,7 +114,7 @@ var COMPONENTNAME = 'atto_media',
     TEMPLATES = {
         ROOT: '' +
             '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' +
-                '<ul class="root nav nav-tabs" role="tablist">' +
+                '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
                     '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' +
                             '{{get_string "link" component}}' +
@@ -144,17 +144,15 @@ var COMPONENTNAME = 'atto_media',
                 '</div>' +
                 '<div class="mdl-align">' +
                     '<br/>' +
-                    '<button class="submit" type="submit">{{get_string "createmedia" component}}</button>' +
+                    '<button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button>' +
                 '</div>' +
             '</form>',
         TAB_PANES: {
             LINK: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' +
-                '<label>' +
-                    'Enter name' +
-                    '<input class="fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
-                        'size="32" required="true"/>' +
-                '</label>',
+                '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' +
+                '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
+                        'size="32" required="true"/>',
             VIDEO: '' +
                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' +
                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
@@ -200,13 +198,19 @@ var COMPONENTNAME = 'atto_media',
         FORM_COMPONENTS: {
             SOURCE: '' +
                 '<div class="{{CSS.SOURCE}} {{id}}">' +
-                    '<label>' +
+                    '<div class="m-b-1">' +
+                        '<label for="url-input">' +
                         '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' +
-                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</a>' +
-                        '<br/>' +
-                        '<input class="{{CSS.URL_INPUT}}" type="url" size="32"/>' +
-                    '</label>' +
-                    '<button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>' +
+                        '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' +
+                        '</label>' +
+                        '<div class="input-group input-append w-100">' +
+                            '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' +
+                            '<span class="input-group-append">' +
+                                '<button class="btn btn-default openmediabrowser" type="button">' +
+                                '{{get_string "browserepositories" component}}</button>' +
+                            '</span>' +
+                        '</div>' +
+                    '</div>' +
                     '{{#multisource}}' +
                         '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' +
                             ' help=../addsourcehelp}}' +
@@ -229,44 +233,42 @@ var COMPONENTNAME = 'atto_media',
                 '</div>',
             DISPLAY_OPTIONS: '' +
                 '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
-                    '<label>' +
-                        '{{get_string "size" component}}' +
-                        '<div class={{CSS.POSTER_SIZE}}>' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videowidth" component}}</span>' +
-                                '<input type="text" class="{{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                    '<div class="m-b-1">' +
+                        '<label>{{get_string "size" component}}</label>' +
+                        '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
+                            '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
+                            '<input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
                             ' x ' +
-                            '<label>' +
-                                '<span class="accesshide">{{get_string "videoheight" component}}</span>' +
-                                '<input type="text" class="{{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
-                            '</label>' +
+                            '<label class="accesshide">{{get_string "videoheight" component}}</label>' +
+                            '<input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
                         '</div>' +
-                    '</label>' +
+                    '</div>' +
                     '<div class="clearfix"></div>' +
                     '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
                 '<div>',
             ADVANCED_SETTINGS: '' +
                 '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
-                    '<label>' +
-                        '<input type="checkbox" checked="true" class="{{CSS.MEDIA_CONTROLS_TOGGLE}}"/>' +
-                        '{{get_string "controls" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_AUTOPLAY_TOGGLE}}"/>' +
-                        '{{get_string "autoplay" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_MUTE_TOGGLE}}"/>' +
-                        '{{get_string "mute" component}}' +
-                    '</label>' +
-                    '<label>' +
-                        '<input type="checkbox" class="{{CSS.MEDIA_LOOP_TOGGLE}}"/>' +
-                        '{{get_string "loop" component}}' +
-                    '</label>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
+                        'id="media-controls-toggle"/>' +
+                        '<label class="form-check-label" for="media-controls-toggle">{{get_string "controls" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
+                        'id="media-autoplay-toggle"/>' +
+                        '<label class="form-check-label" for="media-autoplay-toggle">{{get_string "autoplay" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="media-mute-toggle"/>' +
+                        '<label class="form-check-label" for="media-mute-toggle">{{get_string "mute" component}}</label>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="media-loop-toggle"/>' +
+                        '<label class="form-check-label" for="media-loop-toggle">{{get_string "loop" component}}</label>' +
+                    '</div>' +
                 '</div>',
             TRACK_TABS: '' +
-                '<ul class="nav nav-tabs">' +
+                '<ul class="nav nav-tabs mb-3">' +
                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
                             ' role="tab" data-toggle="tab">' +
@@ -328,11 +330,11 @@ var COMPONENTNAME = 'atto_media',
                     '</div>' +
                 '</div>',
             TRACK: '' +
-                '<div class="{{CSS.TRACK}}">' +
+                '<div class="m-b-1 {{CSS.TRACK}}">' +
                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
-                    '<label class="langlabel">' +
-                        '<span>{{get_string "srclang" component}}</span>' +
-                        '<select class="{{CSS.TRACK_LANG_INPUT}}">' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
+                        '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
                                 '{{#langsinstalled}}' +
                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
@@ -342,15 +344,15 @@ var COMPONENTNAME = 'atto_media',
                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
                             '</optgroup>' +
                         '</select>' +
-                    '</label>' +
-                    '<label class="labellabel">' +
-                        '<span>{{get_string "label" component}}</span>' +
-                        '<input class="{{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
-                    '</label>' +
-                    '<label class="defaultlabel">' +
-                        '<input type="checkbox" class="{{CSS.TRACK_DEFAULT_SELECT}}"/>' +
-                        '{{get_string "default" component}}' +
-                    '</label>' +
+                    '</div>' +
+                    '<div class="form-group">' +
+                        '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
+                        '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
+                    '</div>' +
+                    '<div class="form-check">' +
+                        '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
+                        '<label class="form-check-label">{{get_string "default" component}}</label>' +
+                    '</div>' +
                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
                 '</div>'
         },
diff --git a/lib/editor/atto/plugins/table/styles.css b/lib/editor/atto/plugins/table/styles.css
index ac4e854c260..1c68da3477f 100644
--- a/lib/editor/atto/plugins/table/styles.css
+++ b/lib/editor/atto/plugins/table/styles.css
@@ -3,8 +3,8 @@ div.editor_atto_content th,
 div.editor_atto_content caption {
     border: 1px dashed #bbb;
     position: relative;
-    min-width: 30px;
-    height: 13px;
+    min-width: 2rem;
+    height: 2rem;
 }
 
 div.editor_atto_content caption {
@@ -12,30 +12,18 @@ div.editor_atto_content caption {
 }
 
 div.availablecolors {
-    max-width: 55%;
-    display: inline-block;
-    vertical-align: middle;
+    background-color: #eee;
+    padding: 0.5rem;
 }
-
-div.availablecolors label:not(.hideborder) {
-    border: 1px solid #ddd;
-}
-
-div.availablecolors label {
-    border-radius: 4px;
-    display: inline-block;
-    font-size: 0.1em;
-    padding: 2px;
-    padding-left: 22px;
-}
-
-div.availablecolors label input[type="radio"] {
-    float: none;
-    margin: 0;
-    margin-left: -15px;
-}
-
-input[name="bordersize"],
-input[name="width"] {
-    margin-right: 0.3em;
+div.availablecolors .tablebordercolor,
+div.availablecolors .tablebackgroundcolor {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    vertical-align: sub;
+    border-radius: 25%;
+    margin-right: 0.2rem;
 }
diff --git a/lib/editor/atto/plugins/table/tests/behat/table.feature b/lib/editor/atto/plugins/table/tests/behat/table.feature
index 1083781ea59..1f3e5d4e0e3 100644
--- a/lib/editor/atto/plugins/table/tests/behat/table.feature
+++ b/lib/editor/atto/plugins/table/tests/behat/table.feature
@@ -86,13 +86,13 @@ Feature: Atto tables
     And I click on "Table" "button"
     When I click on "Edit table" "link"
     # Check that the background colour is set correctly.
-    Then the field with xpath "//label/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
+    Then the field with xpath "//div[@class='tablebackgroundcolor']/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
     And the field "Table width (in %)" matches value "100"
     And the field "Borders" matches value "Around table"
     And the field "Style of borders" matches value "dashed"
     And the field "Size of borders" matches value "2"
     # Check that the border colour is set correctly.
-    And the field with xpath "//label/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
+    And the field with xpath "//div[@class='tablebordercolor']/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
 
   @javascript
   Scenario: Create a table with background colour and width with border settings off
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
index c8db3c51fe2..8624a7be891 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
@@ -43,132 +43,175 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
                 '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
             '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
                 '<option value="rows">{{get_string "rows" component}}' + '</option>' +
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
-            '<br/>' +
+            '</div>' +
+            '</div>' +
             '{{#if nonedit}}' +
-                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
+                '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" ' +
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
-                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                '>{{get_string "numberofcolumns" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" ' +
+                    'id="{{elementid}}_atto_table_columns"' +
                 'size="8" min="1" max="20"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
             '{{/if}}' +
             '{{#if allowStyling}}' +
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
-                    '<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
                         '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
                         '<option value="outer">{{get_string "outer" component}}' + '</option>' +
                         '<option value="all">{{get_string "all" component}}' + '</option>' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
-                    '<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" ' +
+                        'id="{{elementid}}_atto_table_borderstyle">' +
                         '{{#each borderStyles}}' +
                             '<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
                         '{{/each}}' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
-                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
+                    'class="form-control w-auto m-r-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
-                    '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                    '<label>{{CSS.BORDERSIZEUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
-                            'type="radio" name="borderColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                                'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                            'type="radio" name="backgroundColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
 
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
-                    '<input name="width" id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" ' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="width" id="{{elementid}}_atto_table_width" ' +
+                        'class="form-control w-auto m-r-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
-                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
-                    '<br>' +
+                    '<label>{{CSS.WIDTHUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '</fieldset>' +
             '{{/if}}' +
             '<div class="mdl-align">' +
             '<br/>' +
             '{{#if edit}}' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "updatetable" component}}</button>' +
             '{{/if}}' +
             '{{#if nonedit}}' +
-                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "createtable" component}}</button>' +
             '{{/if}}' +
             '</div>' +
         '</form>',
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
index 5b9e9158828..3039fcda865 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
@@ -1,4 +1,4 @@
-YUI.add("moodle-atto_table-button",function(e,t){var n="atto_table",r={BORDERSTYLE:"none",BORDERWIDTH:"1"},i={WIDTH:"480px"},s='<form class="{{CSS.FORM}}"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label><input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required /><br/><br/><label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label><select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select><br/><label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label><select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select><br/>{{#if nonedit}}<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label><input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/><br/><label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label><input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/><br/>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label><select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select><br><label for="{{elementid}}_atto_table_borderstyle" class="sameline">{{get_string "borderstyles" component}}</label><select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select><br><label for="{{elementid}}_atto_table_bordersize" class="sameline">{{get_string "bordersize" component}}</label><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label><br><label for="{{elementid}}_atto_table_bordercolour" class="sameline">{{get_string "bordercolour" component}}</label><div id="{{elementid}}_atto_table_bordercolour"class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input>{{get_string "themedefault" component}}</label>{{#each availableColours}}<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" name="borderColour" value="{{this}}" title="{{this}}">{{this}}</label>{{/each}}</div><br>{{/if}}{{#if allowBackgroundColour}}<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">{{get_string "backgroundcolour" component}}</label><div id="{{elementid}}_atto_table_backgroundcolour"class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input>{{get_string "themedefault" component}}</label>{{#each availableColours}}<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" name="backgroundColour" value="{{this}}" title="{{this}}">{{this}}</label>{{/each}}</div><br>{{/if}}{{#if allowWidth}}<label for="{{elementid}}_atto_table_width" class="sameline">{{get_string "width" component}}</label><input name="width" id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label><br>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>',o={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form",BORDERS:"borders",BORDERSIZE:"bordersize",BORDERSIZEUNIT:"px",BORDERCOLOUR:"bordercolour",BORDERSTYLE:"borderstyle",BACKGROUNDCOLOUR:"backgroundcolour",WIDTH:"customwidth",WIDTHUNIT:"%",AVAILABLECOLORS:"availablecolors",COLOURROW:"colourrow"},u={CAPTION:"."+o.CAPTION,CAPTIONPOSITION:"."+o.CAPTIONPOSITION,HEADERS:"."+o.HEADERS,ROWS:"."+o.ROWS,COLUMNS:"."+o.COLUMNS,SUBMIT:"."+o.SUBMIT,BORDERS:"."+o.BORDERS,BORDERSIZE:"."+o.BORDERSIZE,BORDERCOLOURS:"."+o.BORDERCOLOUR+' input[name="borderColour"]',SELECTEDBORDERCOLOUR:"."+o.BORDERCOLOUR+' input[name="borderColour"]:checked',BORDERSTYLE:"."+o.BORDERSTYLE,BACKGROUNDCOLOURS:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]',SELECTEDBACKGROUNDCOLOUR
-:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]:checked',FORM:".atto_form",WIDTH:"."+o.WIDTH,AVAILABLECOLORS:"."+o.AVAILABLECOLORS};e.namespace("M.atto_table").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"}),e.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection!==!1&&!this._currentSelection.collapsed){var e=this.getDialogue({headerContent:M.util.get_string("createtable",n),focusAfterHide:!0,focusOnShowSelector:u.CAPTION,width:i.WIDTH});e.set("bodyContent",this._getDialogueContent(!1)).show(),this._updateAvailableSettings()}},_displayTableEditor:function(e){var t=this._getSuitableTableCell();return t?(e.tableCell=t,this._showTableMenu(e)):this._displayDialogue(e)},_stopAtContentEditableFilter:function(e){return this.editor.contains(e)},_getDialogueContent:function(t){var r=e.Handlebars.compile(s),i=this.get("allowBorders");return this._content=e.Node.create(r({CSS:o,elementid:this.get("host").get("elementid"),component:n,edit:t,nonedit:!t,allowStyling:this.get("allowStyling"),allowBorders:i,borderStyles:this.get("borderStyles"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:this.get("availableColors"),allowWidth:this.get("allowWidth")})),t?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),i&&this._content.one('[name="borders"]').on("change",this._updateAvailableSettings,this),this._content},_updateAvailableSettings:function(){var e=this._content,t=e.one('[name="borders"]'),n=e.one('[name="borderstyles"]'),r=e.one('[name="bordersize"]'),i=e.all('[name="borderColour"]'),s="removeAttribute";if(!t)return;t.get("value")==="default"&&(s="setAttribute"),n&&n[s]("disabled"),r&&r[s]("disabled"),i&&i[s]("disabled")},_getSuitableTableCell:function(){var t=null,n=this.get("host"),r=e.bind(this._stopAtContentEditableFilter,this);n.getSelectedNodes().some(function(e){if(e.ancestor("td, th, caption",!0,r)){t=e;var n=e.ancestor("caption",!0,r);if(n){var i=n.get("parentNode");i&&(t=i.one("td, th"))}return!0}});if(t){var i=n.getSelectionFromNode(t);n.setSelection(i)}return t},_changeNodeType:function(t,n){var r=e.Node.create("<"+n+"></"+n+">");return r.setAttrs(t.getAttrs()),t.get("childNodes").each(function(e){r.append(e.remove())}),t.replace(r),r},_updateTable:function(t){var n,r,i,s,o,a,f,l,c,h,p;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),s=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),o=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),f=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),a=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),l=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),h=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),c=this._lastTarget.ancestor("table"),this._setAppearance(c,{width:h,borders:s,borderColour:f,borderSize:o,borderStyle:a,backgroundColour:l}),p=c.one("caption"),p||(p=e.Node.create("<caption></caption>"),c.insert(p,0)),p.setHTML(n.get("value")),p.setStyle("caption-side",r.get("value")),p.getAttribute("style")||p.removeAttribute("style"),(i.get("value")==="rows"||i.get("value")==="both")&&c.all("tr").each(function(e){var t=e.all("th, td"),n=t.shift(),r;n.get("tagName")==="TD"?(r=this._changeNodeType(n,"th"),r.setAttribute("scope","row")):n.setAttribute("scope","row"),t.each(function(e){e.get("tagName")==="TH"&&(r=this._changeNodeType(e,"td"),r.removeAttribute("scope"))},this)},this);if(i.get("value")==="columns"||i.get("value")==="both"){var d=c.all("tr"),v=d.shift(),m;v.all("td, th").each(function(e){e.get("tagName")==="TD"?(m=this._changeNodeType(e,"th"),m.setAttribute("scope","col")):e.setAttribute("scope","col")},this),d.each(function(e){var t=e.all("th, td");i.get("value")==="both"&&t.shift(),t.each(function(e){e.get("tagName")==="TH"&&(m=this._changeNodeType(e,"td"),m.removeAttribute("scope"))},this)},this)}this.markUpdated()},_setTable:function(t){var n,r,i,s,o,a,f,l,c,h,p,d,v,m;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),s=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),a=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),o=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),p=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),f=t.currentTarget.ancestor(u.FORM).one(u.ROWS),l=t.currentTarget.ancestor(u.FORM).one(u.COLUMNS),c=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),d=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),this.get("host").setSelection(this._currentSelection);var g="\n",y=e.guid();h="<br/>"+g+'<table id="'+y+'">'+g;var b="";r.get("value")&&(b=' style="caption-side: '+r.get("value")+'"'),h+="<caption"+b+">"+e.Escape.html(n.get("value"))+"</caption>"+g,v=0;if(c.get("value")==="columns"||c.get("value")==="both"){v=1,h+="<thead>"+g+"<tr>"+g;for(m=0;m<parseInt(l.get("value"),10);m++)h+='<th scope="col"></th>'+g;h+="</tr>"+g+"</thead>"+g}h+="<tbody>"+g;for(;v<parseInt(f.get("value"),10);v++){h+="<tr>"+g;for(m=0;m<parseInt(l.get("value"),10);m++)m!==0||c.get("value")!=="rows"&&c.get("value")!=="both"?h+="<td ></td>"+g:h+='<th scope="row"></th>'+g;h+="</tr>"+g}h+="</tbody>"+g,h+="</table>"+g+"<br/>",this.get("host").insertContentAtFocusPoint(h);var w=e.one("#"+y);this._setAppearance(w,{width:d,borders:i,borderColour:a,borderSize:s,borderStyle:o,backgroundColour:p}),w.removeAttribute
-("id"),this.markUpdated()},_findColumnCells:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table").all("tr"),r=new e.NodeList,i=new e.NodeList,s=new e.NodeList;return n.each(function(e){var n=e.all("td, th"),o=n.item(t),u=n.item(t-1),a=n.item(t+1);r.push(o),u&&i.push(u),a&&s.push(a)}),{current:r,prev:i,next:s}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),n=this._lastTarget.ancestor("tr"),r=t.all("tr"),i=r.indexOf(n),s=r.item(i-1),o=s?s.one("td"):null;!n||!o?e.one('[data-change="moverowup"]').hide():e.one('[data-change="moverowup"]').show();var u=r.item(i+1),a=n?n.one("td"):!1;!n||!u||!a?e.one('[data-change="moverowdown"]').hide():e.one('[data-change="moverowdown"]').show();var f=this._findColumnCells();f.prev.filter("td").size()>0?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide();var l=f.current.filter("td").size()>0;f.next.size()>0&&l?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),f.current.filter("td").size()>0?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),!n||!n.one("td")?e.one('[data-change="deleterow"]').hide():e.one('[data-change="deleterow"]').show()},_showTableMenu:function(t){t.preventDefault();var r;this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",n),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",n),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",n),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",n),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",n),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",n),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",n),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",n),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",n),data:{change:"edittable"}}],this._contextMenu=new e.M.editor_atto.Menu({items:this._menuOptions}),r=this._contextMenu.get("boundingBox"),r.delegate("click",this._handleTableChange,"a",this)),r=this._contextMenu.get("boundingBox"),this._lastTarget=t.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(r),e.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)});var i=this.buttons[this.name];this.get("host")._setTabFocus(i),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",i),r.one("a")&&r.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e);switch(e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),n=e.ancestor("tr");if(!t||!n)return;var r=t.all("tr");return r.indexOf(n)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(!t)return;var n=t.all("td, th");return n.indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");if(!e||!t)return;e.swap(t),this.markUpdated()},_moveColumnLeft:function(){var e=this._findColumnCells();if(e.current.size()>0&&e.prev.size()>0&&e.current.size()===e.prev.size()){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.prev.item(t);n.swap(r)}}this.markUpdated()},_addCaption:function(){var t=this._lastTarget.ancestor("table"),n=t.one("caption");n||t.insert(e.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table"),t=e.one("caption");t&&t.remove(!0)},_moveColumnRight:function(){var e=this._findColumnCells();if(e.next.size()>0&&e.current.size()===e.next.size()&&e.current.filter("td").size()>0){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.next.item(t);n.swap(r)}}this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");if(!e||!t||!e.one("td"))return;e.swap(t),this.markUpdated()},_getBorderConfiguration:function(t){var n=t.cloneNode(!0),r=n.getStyle("borderStyle"),i=n.getStyle("borderColor"),s=n.getStyle("borderWidth");if(r||i||s){var o=e.Color.toHex(i),u=parseInt(s,10);return{borderStyle:r,borderColor:o==="#"?null:o,borderWidth:isNaN(u)?null:u}}return!1},_setAppearance:function(e,t){var n,r,i,s;t.borderColour&&(n=t.borderColour.get("value")),t.borderSize&&(r=t.borderSize.get("value")),t.borderStyle&&(i=t.borderStyle.get("value")),t.backgroundColour&&(s=t.backgroundColour.get("value")),e.removeAttribute("style"),e.all("td, th").each(function(e){e.removeAttribute("style")},this),t.borders&&(t.borders.get("value")==="outer"?(e.setStyle("borderWidth",r+o.BORDERSIZEUNIT),e.setStyle("borderStyle",i),n!=="none"&&e.setStyle("borderColor",n)):t.borders.get("value")==="all"&&e.all("td, th").each(function(e){e.setStyle("borderWidth",r+o.BORDERSIZEUNIT),e.setStyle("borderStyle",i),n!=="none"&&e.setStyle("borderColor",n)},this)),s!=="none"&&e.setStyle("backgroundColor",s),t.width&&t.width.get("value")&&e.setStyle("width",t.width.get("value")+o.WIDTHUNIT)},_editTable:function(){var t=this.getDialogue({headerContent:M.util.get_string("edittable",n),focusAfterHide:!1,focusOnShowSelector:u.CAPTION,width:i.WIDTH}),s=this._getDialogueContent(!0),o=s.one(u.CAPTION),a=s.one(u.CAPTIONPOSITION),f=s.one(u.HEADERS),l=s.one(u.BORDERS
-),c=s.one(u.BORDERSTYLE),h=s.all(u.BORDERCOLOURS),p=s.one(u.BORDERSIZE),d=s.all(u.BACKGROUNDCOLOURS),v=s.one(u.WIDTH),m=this._lastTarget.ancestor("table"),g=m.one("caption"),y,b;g?o.set("value",g.getHTML()):o.set("value",""),v&&m.getStyle("width").indexOf("px")===-1&&v.set("value",parseInt(m.getStyle("width"),10)),a&&g&&g.getAttribute("style")?a.set("value",g.getStyle("caption-side")):a.set("value",""),m.getStyle("backgroundColor")&&this.get("allowBackgroundColour")&&(y=e.Color.toHex(m.getStyle("backgroundColor")),b=d.filter('[value="'+y+'"]'),b&&b.set("checked",!0));if(this.get("allowBorders")){var w="default",E=this._getBorderConfiguration(m);E?w="outer":(E=this._getBorderConfiguration(m.one("td")),E&&(w="all"));if(E){var S=E.borderStyle||r.BORDERSTYLE,x=E.borderWidth||r.BORDERWIDTH;c.set("value",S),p.set("value",x),l.set("value",w),y=E.borderColor,b=h.filter('[value="'+y+'"]'),b&&b.set("checked",!0)}}var T="columns";m.one('th[scope="row"]')&&(T="rows",m.one('th[scope="col"]')&&(T="both")),f.set("value",T),t.set("bodyContent",s).show(),this._updateAvailableSettings()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table"),r=n.all("tr"),i=new e.NodeList,s=!1;r.each(function(e){var n=e.all("td, th"),r=n.item(t);r.get("tagName")==="TD"&&(s=!0),i.push(r)}),s&&i.remove(!0),this.markUpdated()},_addRowAfter:function(){var t=this._lastTarget.ancestor("tr"),n=this._lastTarget.ancestor("table").one("tbody");n||(n=this._lastTarget.ancestor("table"));var r=n.one("tr");r||(r=this._lastTarget.ancestor("table").one("tr"));if(!r)return;var i=r.cloneNode(!0);i.all("th, td").each(function(t){if(t.get("tagName")==="TH"&&t.getAttribute("scope")!=="row"){var n=e.Node.create("<td></td>");t.replace(n),t=n}t.setHTML("&nbsp;")}),t.ancestor("thead")?(t=r,n.insert(i,t)):t.insert(i,"after"),this.markUpdated()},_addColumnAfter:function(){var t=this._findColumnCells(),n=!0,r=t.next;t.next.size()<=0&&(n=!1,r=t.current),e.each(r,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),n?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}},{ATTRS:{allowBorders:{value:!0},borderStyles:{value:["none","solid","dashed","dotted"]},allowBackgroundColour:{value:!0},allowWidth:{value:!0},allowStyling:{readOnly:!0,getter:function(){return this.get("allowBorders")||this.get("allowBackgroundColour")||this.get("allowWidth")}},availableColors:{value:["#FFFFFF","#EF4540","#FFCF35","#98CA3E","#7D9FD3","#333333"],readOnly:!0}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
+YUI.add("moodle-atto_table-button",function(e,t){var n="atto_table",r={BORDERSTYLE:"none",BORDERWIDTH:"1"},i={WIDTH:"480px"},s='<form class="{{CSS.FORM}}"><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label></div><div class="col-sm-8 span8"><input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required /></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_captionposition">{{get_string "captionposition" component}}</label></div><div class="col-sm-8 span8"><select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label></div><div class="col-sm-8 span8"><select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select></div></div>{{#if nonedit}}<div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label></div><div class="col-sm-8 span8"><input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_columns" >{{get_string "numberofcolumns" component}}</label></div><div class="col-sm-8 span8"><input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/></div></div>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label></div><div class="col-sm-8 span8"><select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_borderstyle">{{get_string "borderstyles" component}}</label></div><div class="col-sm-8 span8"><select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{get_string this ../component}}</option>{{/each}}</select></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_bordersize">{{get_string "bordersize" component}}</label></div><div class="col-sm-8 span8"><div class="form-inline"><input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="form-control w-auto m-r-1 {{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label>{{CSS.BORDERSIZEUNIT}}</label></div></div></div><div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_bordercolour">{{get_string "bordercolour" component}}</label></div><div class="col-sm-8 span8"><div id="{{elementid}}_atto_table_bordercolour"class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebordercolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" class="m-0" name="borderColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" class="m-0" name="borderColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowBackgroundColour}}<div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_backgroundcolour">{{get_string "backgroundcolour" component}}</label></div><div class="col-sm-8 span8"><div id="{{elementid}}_atto_table_backgroundcolour"class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><div class="tablebackgroundcolor" style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"title="{{get_string "themedefault" component}}"></input><label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">{{get_string "themedefault" component}}</label></div>{{#each availableColours}}<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" class="m-0" name="backgroundColour" value="{{this}}" title="{{this}}"><label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">{{this}}</label></div>{{/each}}</div></div></div>{{/if}}{{#if allowWidth}}<div class="m-b-1 form-group row-fluid"><div class="col-sm-4 span4"><label for="{{elementid}}_atto_table_width">{{get_string "width" component}}</label></div><div class="col-sm-8 span8"><div class="form-inline"><input name="width" id="{{elementid}}_atto_table_width" class="form-control w-auto m-r-1 {{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label>{{CSS.WIDTHUNIT}}</label></div></div></div>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="btn btn-default submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="btn btn-default submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>'
+,o={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form",BORDERS:"borders",BORDERSIZE:"bordersize",BORDERSIZEUNIT:"px",BORDERCOLOUR:"bordercolour",BORDERSTYLE:"borderstyle",BACKGROUNDCOLOUR:"backgroundcolour",WIDTH:"customwidth",WIDTHUNIT:"%",AVAILABLECOLORS:"availablecolors",COLOURROW:"colourrow"},u={CAPTION:"."+o.CAPTION,CAPTIONPOSITION:"."+o.CAPTIONPOSITION,HEADERS:"."+o.HEADERS,ROWS:"."+o.ROWS,COLUMNS:"."+o.COLUMNS,SUBMIT:"."+o.SUBMIT,BORDERS:"."+o.BORDERS,BORDERSIZE:"."+o.BORDERSIZE,BORDERCOLOURS:"."+o.BORDERCOLOUR+' input[name="borderColour"]',SELECTEDBORDERCOLOUR:"."+o.BORDERCOLOUR+' input[name="borderColour"]:checked',BORDERSTYLE:"."+o.BORDERSTYLE,BACKGROUNDCOLOURS:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]',SELECTEDBACKGROUNDCOLOUR:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]:checked',FORM:".atto_form",WIDTH:"."+o.WIDTH,AVAILABLECOLORS:"."+o.AVAILABLECOLORS};e.namespace("M.atto_table").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"}),e.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection!==!1&&!this._currentSelection.collapsed){var e=this.getDialogue({headerContent:M.util.get_string("createtable",n),focusAfterHide:!0,focusOnShowSelector:u.CAPTION,width:i.WIDTH});e.set("bodyContent",this._getDialogueContent(!1)).show(),this._updateAvailableSettings()}},_displayTableEditor:function(e){var t=this._getSuitableTableCell();return t?(e.tableCell=t,this._showTableMenu(e)):this._displayDialogue(e)},_stopAtContentEditableFilter:function(e){return this.editor.contains(e)},_getDialogueContent:function(t){var r=e.Handlebars.compile(s),i=this.get("allowBorders");return this._content=e.Node.create(r({CSS:o,elementid:this.get("host").get("elementid"),component:n,edit:t,nonedit:!t,allowStyling:this.get("allowStyling"),allowBorders:i,borderStyles:this.get("borderStyles"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:this.get("availableColors"),allowWidth:this.get("allowWidth")})),t?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),i&&this._content.one('[name="borders"]').on("change",this._updateAvailableSettings,this),this._content},_updateAvailableSettings:function(){var e=this._content,t=e.one('[name="borders"]'),n=e.one('[name="borderstyles"]'),r=e.one('[name="bordersize"]'),i=e.all('[name="borderColour"]'),s="removeAttribute";if(!t)return;t.get("value")==="default"&&(s="setAttribute"),n&&n[s]("disabled"),r&&r[s]("disabled"),i&&i[s]("disabled")},_getSuitableTableCell:function(){var t=null,n=this.get("host"),r=e.bind(this._stopAtContentEditableFilter,this);n.getSelectedNodes().some(function(e){if(e.ancestor("td, th, caption",!0,r)){t=e;var n=e.ancestor("caption",!0,r);if(n){var i=n.get("parentNode");i&&(t=i.one("td, th"))}return!0}});if(t){var i=n.getSelectionFromNode(t);n.setSelection(i)}return t},_changeNodeType:function(t,n){var r=e.Node.create("<"+n+"></"+n+">");return r.setAttrs(t.getAttrs()),t.get("childNodes").each(function(e){r.append(e.remove())}),t.replace(r),r},_updateTable:function(t){var n,r,i,s,o,a,f,l,c,h,p;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),s=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),o=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),f=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),a=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),l=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),h=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),c=this._lastTarget.ancestor("table"),this._setAppearance(c,{width:h,borders:s,borderColour:f,borderSize:o,borderStyle:a,backgroundColour:l}),p=c.one("caption"),p||(p=e.Node.create("<caption></caption>"),c.insert(p,0)),p.setHTML(n.get("value")),p.setStyle("caption-side",r.get("value")),p.getAttribute("style")||p.removeAttribute("style"),(i.get("value")==="rows"||i.get("value")==="both")&&c.all("tr").each(function(e){var t=e.all("th, td"),n=t.shift(),r;n.get("tagName")==="TD"?(r=this._changeNodeType(n,"th"),r.setAttribute("scope","row")):n.setAttribute("scope","row"),t.each(function(e){e.get("tagName")==="TH"&&(r=this._changeNodeType(e,"td"),r.removeAttribute("scope"))},this)},this);if(i.get("value")==="columns"||i.get("value")==="both"){var d=c.all("tr"),v=d.shift(),m;v.all("td, th").each(function(e){e.get("tagName")==="TD"?(m=this._changeNodeType(e,"th"),m.setAttribute("scope","col")):e.setAttribute("scope","col")},this),d.each(function(e){var t=e.all("th, td");i.get("value")==="both"&&t.shift(),t.each(function(e){e.get("tagName")==="TH"&&(m=this._changeNodeType(e,"td"),m.removeAttribute("scope"))},this)},this)}this.markUpdated()},_setTable:function(t){var n,r,i,s,o,a,f,l,c,h,p,d,v,m;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),s=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),a=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),o=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),p=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),f=t.currentTarget.ancestor(u.FORM).one(u.ROWS),l=t.currentTarget.ancestor(u.FORM).one(u.COLUMNS),c=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),d=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),this.get("host").setSelection(this._currentSelection
+);var g="\n",y=e.guid();h="<br/>"+g+'<table id="'+y+'">'+g;var b="";r.get("value")&&(b=' style="caption-side: '+r.get("value")+'"'),h+="<caption"+b+">"+e.Escape.html(n.get("value"))+"</caption>"+g,v=0;if(c.get("value")==="columns"||c.get("value")==="both"){v=1,h+="<thead>"+g+"<tr>"+g;for(m=0;m<parseInt(l.get("value"),10);m++)h+='<th scope="col"></th>'+g;h+="</tr>"+g+"</thead>"+g}h+="<tbody>"+g;for(;v<parseInt(f.get("value"),10);v++){h+="<tr>"+g;for(m=0;m<parseInt(l.get("value"),10);m++)m!==0||c.get("value")!=="rows"&&c.get("value")!=="both"?h+="<td ></td>"+g:h+='<th scope="row"></th>'+g;h+="</tr>"+g}h+="</tbody>"+g,h+="</table>"+g+"<br/>",this.get("host").insertContentAtFocusPoint(h);var w=e.one("#"+y);this._setAppearance(w,{width:d,borders:i,borderColour:a,borderSize:s,borderStyle:o,backgroundColour:p}),w.removeAttribute("id"),this.markUpdated()},_findColumnCells:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table").all("tr"),r=new e.NodeList,i=new e.NodeList,s=new e.NodeList;return n.each(function(e){var n=e.all("td, th"),o=n.item(t),u=n.item(t-1),a=n.item(t+1);r.push(o),u&&i.push(u),a&&s.push(a)}),{current:r,prev:i,next:s}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),n=this._lastTarget.ancestor("tr"),r=t.all("tr"),i=r.indexOf(n),s=r.item(i-1),o=s?s.one("td"):null;!n||!o?e.one('[data-change="moverowup"]').hide():e.one('[data-change="moverowup"]').show();var u=r.item(i+1),a=n?n.one("td"):!1;!n||!u||!a?e.one('[data-change="moverowdown"]').hide():e.one('[data-change="moverowdown"]').show();var f=this._findColumnCells();f.prev.filter("td").size()>0?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide();var l=f.current.filter("td").size()>0;f.next.size()>0&&l?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),f.current.filter("td").size()>0?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),!n||!n.one("td")?e.one('[data-change="deleterow"]').hide():e.one('[data-change="deleterow"]').show()},_showTableMenu:function(t){t.preventDefault();var r;this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",n),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",n),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",n),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",n),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",n),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",n),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",n),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",n),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",n),data:{change:"edittable"}}],this._contextMenu=new e.M.editor_atto.Menu({items:this._menuOptions}),r=this._contextMenu.get("boundingBox"),r.delegate("click",this._handleTableChange,"a",this)),r=this._contextMenu.get("boundingBox"),this._lastTarget=t.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(r),e.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)});var i=this.buttons[this.name];this.get("host")._setTabFocus(i),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",i),r.one("a")&&r.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e);switch(e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),n=e.ancestor("tr");if(!t||!n)return;var r=t.all("tr");return r.indexOf(n)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(!t)return;var n=t.all("td, th");return n.indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");if(!e||!t)return;e.swap(t),this.markUpdated()},_moveColumnLeft:function(){var e=this._findColumnCells();if(e.current.size()>0&&e.prev.size()>0&&e.current.size()===e.prev.size()){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.prev.item(t);n.swap(r)}}this.markUpdated()},_addCaption:function(){var t=this._lastTarget.ancestor("table"),n=t.one("caption");n||t.insert(e.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table"),t=e.one("caption");t&&t.remove(!0)},_moveColumnRight:function(){var e=this._findColumnCells();if(e.next.size()>0&&e.current.size()===e.next.size()&&e.current.filter("td").size()>0){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.next.item(t);n.swap(r)}}this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");if(!e||!t||!e.one("td"))return;e.swap(t),this.markUpdated()},_getBorderConfiguration:function(t){var n=t.cloneNode(!0),r=n.getStyle("borderStyle"),i=n.getStyle("borderColor"),s=n.getStyle("borderWidth");if(r||i||s){var o=e.Color.toHex(i),u=parseInt(s,10);return{borderStyle:r,borderColor:o==="#"?null:o,borderWidth:isNaN(u)?null:u}}return!1},_setAppearance:function(e,t){var n,r,i,s;t.borderColour&&(n=t.borderColour.get("value")),t.borderSize&&(r=t.borderSize.get("value")),t.borderStyle&&(i=t.borderStyle.get("value")),t.backgroundColour&&(s=t.backgroundColour.get("value")),e.
+removeAttribute("style"),e.all("td, th").each(function(e){e.removeAttribute("style")},this),t.borders&&(t.borders.get("value")==="outer"?(e.setStyle("borderWidth",r+o.BORDERSIZEUNIT),e.setStyle("borderStyle",i),n!=="none"&&e.setStyle("borderColor",n)):t.borders.get("value")==="all"&&e.all("td, th").each(function(e){e.setStyle("borderWidth",r+o.BORDERSIZEUNIT),e.setStyle("borderStyle",i),n!=="none"&&e.setStyle("borderColor",n)},this)),s!=="none"&&e.setStyle("backgroundColor",s),t.width&&t.width.get("value")&&e.setStyle("width",t.width.get("value")+o.WIDTHUNIT)},_editTable:function(){var t=this.getDialogue({headerContent:M.util.get_string("edittable",n),focusAfterHide:!1,focusOnShowSelector:u.CAPTION,width:i.WIDTH}),s=this._getDialogueContent(!0),o=s.one(u.CAPTION),a=s.one(u.CAPTIONPOSITION),f=s.one(u.HEADERS),l=s.one(u.BORDERS),c=s.one(u.BORDERSTYLE),h=s.all(u.BORDERCOLOURS),p=s.one(u.BORDERSIZE),d=s.all(u.BACKGROUNDCOLOURS),v=s.one(u.WIDTH),m=this._lastTarget.ancestor("table"),g=m.one("caption"),y,b;g?o.set("value",g.getHTML()):o.set("value",""),v&&m.getStyle("width").indexOf("px")===-1&&v.set("value",parseInt(m.getStyle("width"),10)),a&&g&&g.getAttribute("style")?a.set("value",g.getStyle("caption-side")):a.set("value",""),m.getStyle("backgroundColor")&&this.get("allowBackgroundColour")&&(y=e.Color.toHex(m.getStyle("backgroundColor")),b=d.filter('[value="'+y+'"]'),b&&b.set("checked",!0));if(this.get("allowBorders")){var w="default",E=this._getBorderConfiguration(m);E?w="outer":(E=this._getBorderConfiguration(m.one("td")),E&&(w="all"));if(E){var S=E.borderStyle||r.BORDERSTYLE,x=E.borderWidth||r.BORDERWIDTH;c.set("value",S),p.set("value",x),l.set("value",w),y=E.borderColor,b=h.filter('[value="'+y+'"]'),b&&b.set("checked",!0)}}var T="columns";m.one('th[scope="row"]')&&(T="rows",m.one('th[scope="col"]')&&(T="both")),f.set("value",T),t.set("bodyContent",s).show(),this._updateAvailableSettings()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table"),r=n.all("tr"),i=new e.NodeList,s=!1;r.each(function(e){var n=e.all("td, th"),r=n.item(t);r.get("tagName")==="TD"&&(s=!0),i.push(r)}),s&&i.remove(!0),this.markUpdated()},_addRowAfter:function(){var t=this._lastTarget.ancestor("tr"),n=this._lastTarget.ancestor("table").one("tbody");n||(n=this._lastTarget.ancestor("table"));var r=n.one("tr");r||(r=this._lastTarget.ancestor("table").one("tr"));if(!r)return;var i=r.cloneNode(!0);i.all("th, td").each(function(t){if(t.get("tagName")==="TH"&&t.getAttribute("scope")!=="row"){var n=e.Node.create("<td></td>");t.replace(n),t=n}t.setHTML("&nbsp;")}),t.ancestor("thead")?(t=r,n.insert(i,t)):t.insert(i,"after"),this.markUpdated()},_addColumnAfter:function(){var t=this._findColumnCells(),n=!0,r=t.next;t.next.size()<=0&&(n=!1,r=t.current),e.each(r,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),n?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}},{ATTRS:{allowBorders:{value:!0},borderStyles:{value:["none","solid","dashed","dotted"]},allowBackgroundColour:{value:!0},allowWidth:{value:!0},allowStyling:{readOnly:!0,getter:function(){return this.get("allowBorders")||this.get("allowBackgroundColour")||this.get("allowWidth")}},availableColors:{value:["#FFFFFF","#EF4540","#FFCF35","#98CA3E","#7D9FD3","#333333"],readOnly:!0}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
index c8db3c51fe2..8624a7be891 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
@@ -43,132 +43,175 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
                 '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
             '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
                 '<option value="rows">{{get_string "rows" component}}' + '</option>' +
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
-            '<br/>' +
+            '</div>' +
+            '</div>' +
             '{{#if nonedit}}' +
-                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
+                '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" ' +
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
-                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                '>{{get_string "numberofcolumns" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" ' +
+                    'id="{{elementid}}_atto_table_columns"' +
                 'size="8" min="1" max="20"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
             '{{/if}}' +
             '{{#if allowStyling}}' +
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
-                    '<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
                         '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
                         '<option value="outer">{{get_string "outer" component}}' + '</option>' +
                         '<option value="all">{{get_string "all" component}}' + '</option>' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
-                    '<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" ' +
+                        'id="{{elementid}}_atto_table_borderstyle">' +
                         '{{#each borderStyles}}' +
                             '<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
                         '{{/each}}' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
-                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
+                    'class="form-control w-auto m-r-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
-                    '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                    '<label>{{CSS.BORDERSIZEUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
-                            'type="radio" name="borderColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                                'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                            'type="radio" name="backgroundColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
 
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
-                    '<input name="width" id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" ' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="width" id="{{elementid}}_atto_table_width" ' +
+                        'class="form-control w-auto m-r-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
-                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
-                    '<br>' +
+                    '<label>{{CSS.WIDTHUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '</fieldset>' +
             '{{/if}}' +
             '<div class="mdl-align">' +
             '<br/>' +
             '{{#if edit}}' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "updatetable" component}}</button>' +
             '{{/if}}' +
             '{{#if nonedit}}' +
-                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "createtable" component}}</button>' +
             '{{/if}}' +
             '</div>' +
         '</form>',
diff --git a/lib/editor/atto/plugins/table/yui/src/button/js/button.js b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
index f33bc8754bd..5a36fa981aa 100644
--- a/lib/editor/atto/plugins/table/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
@@ -41,132 +41,175 @@ var COMPONENT = 'atto_table',
     },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<input type="text" class="form-control {{CSS.CAPTION}}" id="{{elementid}}_atto_table_caption" required />' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_captionposition">' +
             '{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
                 '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
             '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
+            '</div>' +
+            '</div>' +
+            '<div class="m-b-1 form-group row-fluid">' +
+            '<div class="col-sm-4 span4">' +
+            '<label for="{{elementid}}_atto_table_headers">{{get_string "headers" component}}</label>' +
+            '</div><div class="col-sm-8 span8">' +
+            '<select class="custom-select {{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
                 '<option value="rows">{{get_string "rows" component}}' + '</option>' +
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
-            '<br/>' +
+            '</div>' +
+            '</div>' +
             '{{#if nonedit}}' +
-                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
+                '<label for="{{elementid}}_atto_table_rows">{{get_string "numberofrows" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.ROWS}}" type="number" value="3" ' +
                 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
+                '<div class="m-b-1 form-group row-fluid">' +
+                '<div class="col-sm-4 span4">' +
                 '<label for="{{elementid}}_atto_table_columns" ' +
-                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                '>{{get_string "numberofcolumns" component}}</label>' +
+                '</div><div class="col-sm-8 span8">' +
+                '<input class="form-control w-auto {{CSS.COLUMNS}}" type="number" value="3" ' +
+                    'id="{{elementid}}_atto_table_columns"' +
                 'size="8" min="1" max="20"/>' +
-                '<br/>' +
+                '</div>' +
+                '</div>' +
             '{{/if}}' +
             '{{#if allowStyling}}' +
                 '<fieldset>' +
                 '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
                 '{{#if allowBorders}}' +
-                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
-                    '<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borders">{{get_string "borders" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borders" class="custom-select {{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
                         '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
                         '<option value="outer">{{get_string "outer" component}}' + '</option>' +
                         '<option value="all">{{get_string "all" component}}' + '</option>' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_borderstyle">' +
                     '{{get_string "borderstyles" component}}</label>' +
-                    '<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<select name="borderstyles" class="custom-select {{CSS.BORDERSTYLE}}" ' +
+                        'id="{{elementid}}_atto_table_borderstyle">' +
                         '{{#each borderStyles}}' +
                             '<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
                         '{{/each}}' +
                     '</select>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordersize">' +
                     '{{get_string "bordersize" component}}</label>' +
-                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="bordersize" id="{{elementid}}_atto_table_bordersize" ' +
+                    'class="form-control w-auto m-r-1 {{CSS.BORDERSIZE}}"' +
                     'type="number" value="1" size="8" min="1" max="50"/>' +
-                    '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
-                    '<br>' +
-                    '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                    '<label>{{CSS.BORDERSIZEUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_bordercolour">' +
                     '{{get_string "bordercolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_bordercolour"' +
-                    'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebordercolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
-                            'type="radio" name="borderColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="borderColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_bordercolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebordercolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
-                                'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowBackgroundColour}}' +
-                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour">' +
                     '{{get_string "backgroundcolour" component}}</label>' +
+                    '</div><div class="col-sm-8 span8">' +
                     '<div id="{{elementid}}_atto_table_backgroundcolour"' +
-                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
-                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                        'style="background-color:transparent;color:transparent">' +
-
+                    'class="form-inline {{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<div class="tablebackgroundcolor" style="background-color:transparent;color:transparent">' +
                             '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
-                            'type="radio" name="backgroundColour" value="none" checked="checked"' +
+                            'type="radio" class="m-0" name="backgroundColour" value="none" checked="checked"' +
                             'title="{{get_string "themedefault" component}}"></input>' +
-
-                            '{{get_string "themedefault" component}}' +
-                        '</label>' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_-1" class="accesshide">' +
+                            '{{get_string "themedefault" component}}</label>' +
+                        '</div>' +
 
                         '{{#each availableColours}}' +
-                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                            'style="background-color:{{this}};color:{{this}}">' +
-
+                            '<div class="tablebackgroundcolor" style="background-color:{{this}};color:{{this}}">' +
                                 '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
-                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
-
-                                '{{this}}' +
-                            '</label>' +
+                                'type="radio" class="m-0" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+                                '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}" class="accesshide">' +
+                                '{{this}}</label>' +
+                            '</div>' +
                         '{{/each}}' +
                     '</div>' +
-                    '<br>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '{{#if allowWidth}}' +
-                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '<div class="m-b-1 form-group row-fluid">' +
+                    '<div class="col-sm-4 span4">' +
+                    '<label for="{{elementid}}_atto_table_width">' +
                     '{{get_string "width" component}}</label>' +
-                    '<input name="width" id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" ' +
+                    '</div><div class="col-sm-8 span8">' +
+                    '<div class="form-inline">' +
+                    '<input name="width" id="{{elementid}}_atto_table_width" ' +
+                        'class="form-control w-auto m-r-1 {{CSS.WIDTH}}" size="8" ' +
                         'type="number" min="0" max="100"/>' +
-                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
-                    '<br>' +
+                    '<label>{{CSS.WIDTHUNIT}}</label>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
                 '{{/if}}' +
                 '</fieldset>' +
             '{{/if}}' +
             '<div class="mdl-align">' +
             '<br/>' +
             '{{#if edit}}' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "updatetable" component}}</button>' +
             '{{/if}}' +
             '{{#if nonedit}}' +
-                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+                '<button class="btn btn-default submit" type="submit">{{get_string "createtable" component}}</button>' +
             '{{/if}}' +
             '</div>' +
         '</form>',
diff --git a/lib/editor/atto/styles.css b/lib/editor/atto/styles.css
index 84c777e2704..f2b74e119f8 100644
--- a/lib/editor/atto/styles.css
+++ b/lib/editor/atto/styles.css
@@ -107,10 +107,10 @@ div.editor_atto_toolbar div.atto_group {
     margin: 4px;
 }
 
-.atto_form label.sameline {
+/*.atto_form label.sameline {
     display: inline-block;
     min-width: 10em;
-}
+}*/
 
 .atto_form textarea.fullwidth,
 .atto_form input.fullwidth {
@@ -118,14 +118,13 @@ div.editor_atto_toolbar div.atto_group {
 }
 
 .atto_form {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding: 0.5rem;
 }
 
-.atto_form label {
+/*.atto_form label {
     display: block;
     margin: 0 0 5px 0;
-}
+}*/
 
 .atto_control {
     position: absolute;
diff --git a/theme/boost/scss/moodle/bs4alphacompat.scss b/theme/boost/scss/moodle/bs4alphacompat.scss
index 34424875514..4d01c212437 100644
--- a/theme/boost/scss/moodle/bs4alphacompat.scss
+++ b/theme/boost/scss/moodle/bs4alphacompat.scss
@@ -127,9 +127,9 @@ $tag-font-weight: bold !default;
     background-size: ($input-height / 2) ($input-height / 2);
 }
 
-.form-check-input {
-    position: static;
-}
+// .form-check-input {
+//     position: static;
+// }
 
 @mixin tag-variant($color) {
     background-color: $color;
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index af0e685b157..53e5411f775 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2108,3 +2108,10 @@ $footer-link-color: $bg-inverse-link-color !default;
 .open.atto_menu > .dropdown-menu {
     display: block;
 }
+div.editor_atto_toolbar button .icon {
+    color: $gray-700;
+}
+.w-auto {
+    width: auto;
+}
+
diff --git a/theme/boost/templates/core/filemanager_fileselect.mustache b/theme/boost/templates/core/filemanager_fileselect.mustache
index 48d72ed60b3..ca9d291f4cc 100644
--- a/theme/boost/templates/core/filemanager_fileselect.mustache
+++ b/theme/boost/templates/core/filemanager_fileselect.mustache
@@ -24,13 +24,13 @@
                 <div class="fp-license form-group row">
                     <label class="form-control-label col-4">{{#str}}chooselicense, repository{{/str}}</label>
                     <div class="col-8">
-                        <select class="form-control"></select>
+                        <select class="custom-select"></select>
                     </div>
                 </div>
                 <div class="fp-path form-group row">
                     <label class="form-control-label col-4">{{#str}}path, repository{{/str}}</label>
                     <div class="col-8">
-                        <select class="form-control"></select>
+                        <select class="custom-select"></select>
                     </div>
                 </div>
                 <div class="fp-original form-group row">
diff --git a/theme/boost/templates/core/filemanager_loginform.mustache b/theme/boost/templates/core/filemanager_loginform.mustache
index 7002e76a83a..c9d6caecdfb 100644
--- a/theme/boost/templates/core/filemanager_loginform.mustache
+++ b/theme/boost/templates/core/filemanager_loginform.mustache
@@ -22,7 +22,7 @@
                 </div>
                 <div class="fp-login-select form-group">
                     <label class="form-control-label"></label>
-                    <select class="form-control"></select>
+                    <select class="custom-select"></select>
                 </div>
                 <div class="fp-login-input form-group">
                     <label class="form-control-label"></label>
diff --git a/theme/boost/templates/core/filemanager_selectlayout.mustache b/theme/boost/templates/core/filemanager_selectlayout.mustache
index 110a5e816b4..d27da6e2c27 100644
--- a/theme/boost/templates/core/filemanager_selectlayout.mustache
+++ b/theme/boost/templates/core/filemanager_selectlayout.mustache
@@ -41,7 +41,7 @@
             </div>
             <div class="fp-setlicense form-group row">
                 <label class="col-form-label">{{#str}}chooselicense, repository{{/str}}</label>
-                <select class="form-control"></select>
+                <select class="custom-select"></select>
             </div>
             <div class="form-group row">
                 <div class="fp-select-buttons">
diff --git a/theme/boost/templates/core/filemanager_uploadform.mustache b/theme/boost/templates/core/filemanager_uploadform.mustache
index 4caf07b08ca..b3aec8e2d10 100644
--- a/theme/boost/templates/core/filemanager_uploadform.mustache
+++ b/theme/boost/templates/core/filemanager_uploadform.mustache
@@ -18,7 +18,7 @@
                 </div>
                 <div class="fp-setlicense control-group">
                     <label>{{#str}}chooselicense, repository{{/str}}</label>
-                    <select class="form-control"></select>
+                    <select class="custom-select"></select>
                 </div>
             </div>
         </form>
diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less
index 8d4842e0695..b7a22236ea7 100644
--- a/theme/bootstrapbase/less/moodle/bs4-compat.less
+++ b/theme/bootstrapbase/less/moodle/bs4-compat.less
@@ -25,6 +25,9 @@
 
 
 // Due to lessphp limitations, the following classes must be declared statically without use of a loop.
+.p-0 {
+    padding: 0 !important;
+}
 .p-l-1 {
     padding-left: 1 * @baseFontSize !important;
 }
@@ -49,6 +52,10 @@
     padding: 1 * @baseFontSize !important;
 }
 
+.m-0 {
+    margin: 0 !important;
+}
+
 .m-l-1 {
     margin-left: 1 * @baseFontSize !important;
 }
@@ -301,3 +308,7 @@
 .bg-faded {
     background-color: @grayLighter;
 }
+
+.w-100 {
+    width: 100%;
+}
diff --git a/theme/bootstrapbase/less/moodle/forms.less b/theme/bootstrapbase/less/moodle/forms.less
index ce2775ab93b..cd03f9b2fb6 100644
--- a/theme/bootstrapbase/less/moodle/forms.less
+++ b/theme/bootstrapbase/less/moodle/forms.less
@@ -162,7 +162,9 @@ form {
 #page-mod-forum-search .c1 {
     .form-horizontal .controls
 }
-
+.form-inline label:not(.sr-only):not(.accesshide) + select {
+    margin-left: 0.5rem;
+}
 
 .formsettingheading {
     .form-horizontal .help-block
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 4bb19762f8c..32cad6e069a 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -16726,6 +16726,9 @@ form {
 #page-mod-forum-search .c1:first-child {
   *padding-left: 200px;
 }
+.form-inline label:not(.sr-only):not(.accesshide) + select {
+  margin-left: 0.5rem;
+}
 .formsettingheading {
   margin-bottom: 0;
 }
@@ -21836,6 +21839,9 @@ ul.indented-list {
 .card-block {
   padding: 1.25rem;
 }
+.p-0 {
+  padding: 0 !important;
+}
 .p-l-1 {
   padding-left: 14px !important;
 }
@@ -21859,6 +21865,9 @@ ul.indented-list {
 .p-a-1 {
   padding: 14px !important;
 }
+.m-0 {
+  margin: 0 !important;
+}
 .m-l-1 {
   margin-left: 14px !important;
 }
@@ -22066,3 +22075,6 @@ ul.indented-list {
 .bg-faded {
   background-color: #eee;
 }
+.w-100 {
+  width: 100%;
+}