diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
index 5fd4b28ef..4a0110ab7 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
@@ -58,6 +58,10 @@
 <div class="mb-3">Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.</div>
 <Demo Type="typeof(Offcanvas_Demo_06_Events)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Responsive" PageUrl="@pageUrl" HashTagName="responsive" />
+<div class="mb-3">Blazor Bootstrap offcanvas component can implement responsiveness to show its content inline on larger devices and revert to default hidden behavior on smaller devices.  This example switches between the two responsive views at the lg breakpoint.</div>
+<Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />
+
 @code {
     private string pageUrl = "/offcanvas";
     private string title = "Blazor Offcanvas Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
new file mode 100644
index 000000000..4093959f4
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
@@ -0,0 +1,19 @@
+@* Per bootstrap documentation, disable the default "offcanvas" class and replace with responsive offcanvas-lg class.
+    This will make the offcanvas appear as a modal on small devices and on larger devices show the content inline.
+*@
+<Offcanvas @ref="offcanvas" Title="Responsive Offcanvas" Class="offcanvas-lg" EnableDefaultClass="false">
+    <BodyTemplate>...</BodyTemplate>
+</Offcanvas>
+
+@* Only show the button when the offcanvas is hidden below its breakpoint. *@
+<Button Class="d-lg-none" Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick()">Show offcanvas</Button>
+
+@code {
+    private Offcanvas offcanvas = default!;
+    private Placement placement;
+
+    private async Task OnShowOffcanvasClick()
+    {
+        await offcanvas.ShowAsync();
+    }
+}
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor
index c88ac52e7..ec81c4607 100644
--- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor
+++ b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor
@@ -16,7 +16,7 @@
 
             @if (ShowCloseButton)
             {
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#@Id" aria-label="Close"></button>
             }
         </div>
     }
diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
index 7c3d705c6..928342e72 100644
--- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
+++ b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
@@ -101,10 +101,19 @@ private async Task ShowAsync(string? title, Type? type, Dictionary<string, objec
 
     protected override string? ClassNames =>
         BuildClassNames(Class,
-            (BootstrapClass.Offcanvas, true),
+            (BootstrapClass.Offcanvas, EnableDefaultClass),
             (Placement.ToOffcanvasPlacementClass(), true),
             (Size.ToOffcanvasSizeClass(), true));
 
+    /// <summary>
+    /// When set to false, suppresses the rendering of the default "offcanvas" class, which must be ommitted in some scenarios such as a responsive offcanvas. 
+    /// </summary>
+    /// <remarks>
+    /// Defaults to true.
+    /// </remarks>
+    [Parameter]
+    public bool EnableDefaultClass { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the body CSS class.
     /// </summary>