diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 63d2be9e700..9a8c65d16ae 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -355,10 +355,10 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
   </div>
 </body>
 <script type="module">
-  import { createApp } from 'vue';
+  import { createApp } from 'vue'
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
-  import {Dropdown} from 'bootstrap'
+  import { Dropdown } from 'bootstrap/dist/js/bootstrap'
 
   const app = createApp({
     components: {
diff --git a/src_assets/common/assets/web/init.js b/src_assets/common/assets/web/init.js
index 3f30a0f034e..22b84df293e 100644
--- a/src_assets/common/assets/web/init.js
+++ b/src_assets/common/assets/web/init.js
@@ -1,5 +1,10 @@
 import i18n from './locale'
 
+// must import even if not implicitly using here
+// https://github.com/aurelia/skeleton-navigation/issues/894
+// https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9
+import 'bootstrap/dist/js/bootstrap'
+
 export function initApp(app, config) {
     //Wait for locale initialization, then render
     i18n().then(i18n => {
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
index 54109ca5255..e636a8ac9e2 100644
--- a/src_assets/common/assets/web/template_header.html
+++ b/src_assets/common/assets/web/template_header.html
@@ -7,4 +7,3 @@
 <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
 <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
 <link href="/assets/css/sunshine.css" rel="stylesheet" />
-<script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>