diff --git a/templates/advancedsettings.mustache b/templates/advancedsettings.mustache
index 673414f..a7d72bd 100644
--- a/templates/advancedsettings.mustache
+++ b/templates/advancedsettings.mustache
@@ -50,7 +50,7 @@
 <div id="learningmap-advanced-settings" class="card border border-dark" hidden>
     <div class="card-body">
         <div class="card-title alert alert-dark">{{#str}} advancedsettings, learningmap {{/str}}
-            <button type="button" class="ml-2 mb-1 close" aria-label="Close" id="learningmap-advanced-settings-close">
+            <button type="button" class="ms-2 mb-1 close" aria-label="Close" id="learningmap-advanced-settings-close">
                 <span>&times;</span>
              </button>
         </div>
diff --git a/templates/formitem.mustache b/templates/formitem.mustache
index bad05f2..a913789 100644
--- a/templates/formitem.mustache
+++ b/templates/formitem.mustache
@@ -73,30 +73,30 @@
     }
 }}
 {{#completiondisabled}}<div class="alert alert-danger row">{{#str}} completiondisabled, learningmap {{/str}}</div>{{/completiondisabled}}
-<div class="form-group row fitem" id="mod_learningmap_editor">
-    <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
+<div class="mb-3 row fitem" id="mod_learningmap_editor">
+    <div class="col-md-3 col-form-label d-flex pb-0 pe-md-0">
         <label class="d-inline word-break">{{#str}} learningmap, learningmap {{/str}}</label>
         <div class="form-label-addon d-flex align-items-center align-self-start">{{{ help }}}</div>
     </div>
-    <div class="col-md-9 form-inline align-items-start felement">
-        <div class="learningmap-menubar container border-left border-top border-right border-dark">
+    <div class="col-md-9 d-flex flex-wrap align-items-start felement">
+        <div class="learningmap-menubar container border-start border-top border-end border-dark">
             <div class="row m-1">
                 <div class="col">
                     <label for="learningmap-color-place">{{#str}} places, learningmap {{/str}}</label>
                 </div>
-                <div class="col border-right border-dark">
+                <div class="col border-end border-dark">
                     <input type="color" id="learningmap-color-place">
                 </div>
                 <div class="col">
                     <label for="learningmap-color-visited">{{#str}} visited, learningmap {{/str}}</label>
                 </div>
-                <div class="col border-right border-dark">
+                <div class="col border-end border-dark">
                     <input type="color" id="learningmap-color-visited">
                 </div>
                 <div class="col">
                     <label for="learningmap-color-stroke">{{#str}} paths, learningmap {{/str}}</label>
                 </div>
-                <div class="col border-right border-dark">
+                <div class="col border-end border-dark">
                     <input type="color" id="learningmap-color-stroke">
                 </div>
                 <div class="col-sm text-center">
diff --git a/templates/inlinehelp.mustache b/templates/inlinehelp.mustache
index 50b1544..0d7be88 100644
--- a/templates/inlinehelp.mustache
+++ b/templates/inlinehelp.mustache
@@ -33,10 +33,10 @@
         "usecaselink": "https://www.mebis.bayern.de/infoportal/support-bereich/lernplattform-support-bereich/lernlandkarten/"
     }
 }}
-<div class="form-group row fitem" id="mod_learningmap_inlinehelp">
+<div class="mb-3 row fitem" id="mod_learningmap_inlinehelp">
     <div class="col-md-3"></div>
     <div class="col-md-9">
-        <a class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="<div class=&quot;no-overflow&quot;>{{#str}} intro_help, learningmap{{/str}}</div> " data-html="true" tabindex="0" data-trigger="focus">{{#str}} editorhelp, learningmap {{/str}}</a>
+        <a class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="<div class=&quot;no-overflow&quot;>{{#str}} intro_help, learningmap{{/str}}</div> " data-bs-html="true" tabindex="0" data-bs-trigger="focus">{{#str}} editorhelp, learningmap {{/str}}</a>
         {{#usecaselink}}<a href="{{ usecaselink }}" class="btn btn-primary" target="_blank" rel="noreferrer noopener">{{#str}} usecasehelp, learningmap {{/str}}</a>{{/usecaselink}}
     </div>
 </div>
\ No newline at end of file