diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor
index 79033412b..4bb9589c2 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor
@@ -1,35 +1,37 @@
-<Dropdown Color="DropdownColor.Secondary" AutoClose="true">
-    <DropdownToggleButton>Default dropdown</DropdownToggleButton>
-    <DropdownMenu>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-    </DropdownMenu>
-</Dropdown>
+<div class="btn-group gap-3">
+    <Dropdown Color="DropdownColor.Secondary" AutoClose="true">
+        <DropdownToggleButton>Default dropdown</DropdownToggleButton>
+        <DropdownMenu>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 
-<Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
-    <DropdownToggleButton>Clickable outside</DropdownToggleButton>
-    <DropdownMenu>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-    </DropdownMenu>
-</Dropdown>
+    <Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
+        <DropdownToggleButton>Clickable outside</DropdownToggleButton>
+        <DropdownMenu>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 
-<Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Inside">
-    <DropdownToggleButton>Clickable inside</DropdownToggleButton>
-    <DropdownMenu>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-    </DropdownMenu>
-</Dropdown>
+    <Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Inside">
+        <DropdownToggleButton>Clickable inside</DropdownToggleButton>
+        <DropdownMenu>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 
-<Dropdown Color="DropdownColor.Secondary" AutoClose="false">
-    <DropdownToggleButton>Manual close</DropdownToggleButton>
-    <DropdownMenu>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
-    </DropdownMenu>
-</Dropdown>
+    <Dropdown Color="DropdownColor.Secondary" AutoClose="false">
+        <DropdownToggleButton>Manual close</DropdownToggleButton>
+        <DropdownMenu>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+            <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
+</div>
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor
index 85d7034b6..9b16514a2 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor
@@ -1,20 +1,40 @@
-<Dropdown @ref="dropdown1" Color="DropdownColor.Secondary">
-    <DropdownToggleButton>Dropdown button</DropdownToggleButton>
-    <DropdownMenu>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
-        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
-    </DropdownMenu>
-</Dropdown>
+<div class="mb-3">
+    <div class="btn-group gap-3">
+        <Dropdown @ref="dropdown1" Color="DropdownColor.Secondary">
+            <DropdownToggleButton>Dropdown button</DropdownToggleButton>
+            <DropdownMenu>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
 
-<Button Color="ButtonColor.Primary" @onclick="ShowAsync">Show</Button>
-<Button Color="ButtonColor.Primary" @onclick="HideAsync">Hide</Button>
-<Button Color="ButtonColor.Primary" @onclick="ToggleAsync">Toggle</Button>
+        <Button Color="ButtonColor.Primary" @onclick="ShowAsync">Show</Button>
+        <Button Color="ButtonColor.Primary" @onclick="HideAsync">Hide</Button>
+    </div>
+</div>
 
-@code{
+<div>
+    <div class="btn-group gap-3">
+        <Dropdown @ref="dropdown2" Color="DropdownColor.Secondary" AutoClose="false">
+            <DropdownToggleButton>Dropdown button</DropdownToggleButton>
+            <DropdownMenu>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
+                <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+
+        <Button Color="ButtonColor.Primary" @onclick="ToggleAsync">Toggle</Button>
+    </div>
+</div>
+
+@code {
     private Dropdown dropdown1 = default!;
+    private Dropdown dropdown2 = default!;
 
     private async Task ShowAsync() => await dropdown1.ShowAsync();
     private async Task HideAsync() => await dropdown1.HideAsync();
-    private async Task ToggleAsync() => await dropdown1.ToggleAsync();
+
+    private async Task ToggleAsync() => await dropdown2.ToggleAsync();
 }
diff --git a/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs b/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs
index 86074c61d..e86fdcf67 100644
--- a/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs
+++ b/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs
@@ -89,7 +89,7 @@ protected override void OnInitialized()
 
     protected override string? ClassNames =>
         BuildClassNames(Class,
-            (BootstrapClass.ButtonGroup, true),
+            (BootstrapClass.ButtonGroup, Split),
             (Direction.ToDropdownDirectionClass(), true));
 
     /// <summary>
diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js
index fa50c95de..952776f28 100644
--- a/blazorbootstrap/wwwroot/blazor.bootstrap.js
+++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js
@@ -399,48 +399,60 @@ window.blazorBootstrap = {
     dropdown: {
         dispose: (elementId) => {
             let dropdownEl = document.getElementById(elementId);
-            if (dropdownEl != null)
-                bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl)?.dispose();
+            if (dropdownEl != null) {
+                let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+                bootstrap?.Dropdown?.getOrCreateInstance(toggleEl)?.dispose();
+            }
         },
         hide: (elementId) => {
             let dropdownEl = document.getElementById(elementId);
-            if (dropdownEl != null)
-                bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl)?.hide();
+            if (dropdownEl != null) {
+                let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+                bootstrap?.Dropdown?.getOrCreateInstance(toggleEl)?.hide();
+            }
         },
         initialize: (elementId, dotNetHelper) => {
             let dropdownEl = document.getElementById(elementId);
             if (dropdownEl == null)
                 return;
 
-            dropdownEl.addEventListener('hide.bs.dropdown', function () {
+            let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+
+            toggleEl.addEventListener('hide.bs.dropdown', function () {
                 dotNetHelper.invokeMethodAsync('bsHideDropdown');
             });
-            dropdownEl.addEventListener('hidden.bs.dropdown', function () {
+            toggleEl.addEventListener('hidden.bs.dropdown', function () {
                 dotNetHelper.invokeMethodAsync('bsHiddenDropdown');
             });
-            dropdownEl.addEventListener('show.bs.dropdown', function () {
+            toggleEl.addEventListener('show.bs.dropdown', function () {
                 dotNetHelper.invokeMethodAsync('bsShowDropdown');
             });
-            dropdownEl.addEventListener('shown.bs.dropdown', function () {
+            toggleEl.addEventListener('shown.bs.dropdown', function () {
                 dotNetHelper.invokeMethodAsync('bsShownDropdown');
             });
 
-            bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl);
+            bootstrap?.Dropdown?.getOrCreateInstance(toggleEl);
         },
         show: (elementId) => {
             let dropdownEl = document.getElementById(elementId);
-            if (dropdownEl != null)
-                bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl)?.show();
+            if (dropdownEl != null) {
+                let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+                bootstrap?.Dropdown?.getOrCreateInstance(toggleEl)?.show();
+            }
         },
         toggle: (elementId) => {
             let dropdownEl = document.getElementById(elementId);
-            if (dropdownEl != null)
-                bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl)?.toggle();
+            if (dropdownEl != null) {
+                let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+                bootstrap?.Dropdown?.getOrCreateInstance(toggleEl)?.toggle();
+            }
         },
         update: (elementId) => {
             let dropdownEl = document.getElementById(elementId);
-            if (dropdownEl != null)
-                bootstrap?.Dropdown?.getOrCreateInstance(dropdownEl)?.update();
+            if (dropdownEl != null) {
+                let toggleEl = dropdownEl.querySelector('[data-bs-toggle="dropdown"]') ?? dropdownEl;
+                bootstrap?.Dropdown?.getOrCreateInstance(toggleEl)?.update();
+            }
         }
     },
     googlemaps: {