diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor b/src/BootstrapBlazor/Components/Modal/Modal.razor
index 28e989b800d..c8d286e6f3a 100644
--- a/src/BootstrapBlazor/Components/Modal/Modal.razor
+++ b/src/BootstrapBlazor/Components/Modal/Modal.razor
@@ -3,7 +3,8 @@
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <BootstrapBlazorRootContent>
-    <div @attributes="@AdditionalAttributes" class="@ClassString" tabindex="-1" role="dialog" data-bs-backdrop="@Backdrop" data-bs-keyboard="@KeyboardString" id="@Id">
+    <div @attributes="@AdditionalAttributes" class="@ClassString" tabindex="-1" role="dialog" id="@Id"
+         data-bs-backdrop="@Backdrop" data-bs-keyboard="@KeyboardString">
         <CascadingValue Value="this" IsFixed="true">
             @ChildContent
         </CascadingValue>
diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js
index 0f3aeff23c8..cba81a4d8c1 100644
--- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js
+++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js
@@ -50,6 +50,7 @@ export function init(id, invoke, shownCallback, closeCallback) {
             modal.modal._config.backdrop = 'static'
 
             modal.handlerKeyboardAndBackdrop()
+            el.classList.add('show');
         }
     }