diff --git a/src/BootstrapBlazor/Components/Filters/FilterButton.razor b/src/BootstrapBlazor/Components/Filters/FilterButton.razor
index d42d86636c4..7bfb2a41ce3 100644
--- a/src/BootstrapBlazor/Components/Filters/FilterButton.razor
+++ b/src/BootstrapBlazor/Components/Filters/FilterButton.razor
@@ -2,13 +2,15 @@
 @typeparam TValue
 @inherits Dropdown<TValue>
 
-<button type="button" class="btn btn-filter dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="@FilterIcon" />
-</button>
-<div class="dropdown-menu shadow">
-    @foreach (var item in Items)
-    {
-        <div class="@ActiveItem(item)" @onclick="e => OnItemClick(item)">@item.Text</div>
-    }
+<div id="@Id" class="bb-filter-btn-group">
+    <button type="button" class="btn btn-filter dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false">
+        <i class="@FilterIcon" />
+    </button>
+    <div class="dropdown-menu shadow">
+        @foreach (var item in Items)
+        {
+            <div class="@ActiveItem(item)" @onclick="e => OnItemClick(item)">@item.Text</div>
+        }
+    </div>
+    <Button Icon="@ClearIcon" Color="Color.None" class="btn-ban text-danger" OnClickWithoutRender="ClearFilter" />
 </div>
-<Button Icon="@ClearIcon" Color="Color.None" class="btn-ban text-danger" OnClickWithoutRender="ClearFilter" />
diff --git a/src/BootstrapBlazor/Components/Filters/FilterButton.razor.js b/src/BootstrapBlazor/Components/Filters/FilterButton.razor.js
new file mode 100644
index 00000000000..221fd39488e
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Filters/FilterButton.razor.js
@@ -0,0 +1,22 @@
+import Data from "../../modules/data.js"
+import Popover from "../../modules/base-popover.js"
+
+export function init(id) {
+    const el = document.getElementById(id)
+    if (el == null) {
+        return
+    }
+    const popover = Popover.init(el);
+
+    const dropdown = { popover }
+    Data.set(id, dropdown)
+}
+
+export function dispose(id) {
+    const dropdown = Data.get(id)
+    Data.remove(id)
+
+    if (dropdown) {
+        Popover.dispose(dropdown.popover)
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Filters/FilterButton.razor.scss b/src/BootstrapBlazor/Components/Filters/FilterButton.razor.scss
new file mode 100644
index 00000000000..2ae5d4e7f39
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Filters/FilterButton.razor.scss
@@ -0,0 +1,4 @@
+.bb-filter-btn-group {
+    display: flex;
+    flex-wrap: nowrap;
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
index a923ae67f98..90e6b6864fb 100644
--- a/src/BootstrapBlazor/wwwroot/scss/components.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -40,6 +40,7 @@
 @use "../../Components/ErrorLogger/ErrorLogger.razor.scss";
 @use "../../Components/FlipClock/FlipClock.razor.scss";
 @use "../../Components/FileIcon/FileIcon.razor.scss";
+@use "../../Components/Filters/FilterButton.razor.scss";
 @use "../../Components/Filters/MultiFilter.razor.scss";
 @use "../../Components/Filters/TableColumnFilter.razor.scss";
 @use "../../Components/Footer/Footer.razor.scss";