diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index f015d332c..960788a28 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -229,41 +229,31 @@
           display: none;
         }
 
-        .offcanvas-header {
-          display: none;
-        }
-
         .offcanvas {
-          position: inherit;
-          bottom: 0;
+          // stylelint-disable declaration-no-important
+          position: static;
           z-index: auto;
           flex-grow: 1;
-          visibility: visible !important; // stylelint-disable-line declaration-no-important
-          background-color: transparent;
-          border-right: 0;
-          border-left: 0;
+          width: auto !important;
+          height: auto !important;
+          visibility: visible !important;
+          background-color: transparent !important;
+          border: 0 !important;
+          transform: none !important;
           @include box-shadow(none);
           @include transition(none);
-          transform: none;
-        }
-        .offcanvas-top,
-        .offcanvas-bottom {
-          height: auto;
-          border-top: 0;
-          border-bottom: 0;
-        }
+          // stylelint-enable declaration-no-important
 
-        .offcanvas-body {
-          display: flex;
-          flex-grow: 0;
-          padding: 0;
-          overflow-y: visible;
-        }
+          .offcanvas-header {
+            display: none;
+          }
 
-        // Reset `background-color` in case `.bg-*` classes are used in offcanvas
-        .offcanvas,
-        .offcanvas-body {
-          background-color: transparent !important; // stylelint-disable-line declaration-no-important
+          .offcanvas-body {
+            display: flex;
+            flex-grow: 0;
+            padding: 0;
+            overflow-y: visible;
+          }
         }
       }
     }
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 5288fa9ce..43158f725 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -1,30 +1,121 @@
-.offcanvas {
-  position: fixed;
-  bottom: 0;
-  z-index: $zindex-offcanvas;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  color: $offcanvas-color;
-  visibility: hidden;
-  background-color: $offcanvas-bg-color;
-  background-clip: padding-box;
-  outline: 0;
-  @include box-shadow($offcanvas-box-shadow);
-  @include transition(transform $offcanvas-transition-duration ease-in-out);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
 
-  &.showing,
-  &.show:not(.hiding) {
-    transform: none;
-  }
+  .offcanvas#{$infix} {
+    @include media-breakpoint-down($next) {
+      position: fixed;
+      bottom: 0;
+      z-index: $zindex-offcanvas;
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      color: $offcanvas-color;
+      visibility: hidden;
+      background-color: $offcanvas-bg-color;
+      background-clip: padding-box;
+      outline: 0;
+      @include box-shadow($offcanvas-box-shadow);
+      @include transition(transform $offcanvas-transition-duration ease-in-out);
 
-  &.showing,
-  &.hiding,
-  &.show {
-    visibility: visible;
+      &.showing,
+      &.show:not(.hiding) {
+        transform: none;
+      }
+
+      &.showing,
+      &.hiding,
+      &.show {
+        visibility: visible;
+      }
+
+      &.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: $offcanvas-horizontal-width;
+        border-right: $offcanvas-border-width solid $offcanvas-border-color;
+        transform: translateX(-100%);
+      }
+
+      &.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: $offcanvas-horizontal-width;
+        border-left: $offcanvas-border-width solid $offcanvas-border-color;
+        transform: translateX(100%);
+      }
+
+      &.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: $offcanvas-vertical-height;
+        max-height: 100%;
+        border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+        transform: translateY(-100%);
+      }
+
+      &.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: $offcanvas-vertical-height;
+        max-height: 100%;
+        border-top: $offcanvas-border-width solid $offcanvas-border-color;
+        transform: translateY(100%);
+      }
+    }
+
+    @if not ($infix == "") {
+      @include media-breakpoint-up($next) {
+        height: auto;
+        background-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border: 0;
+
+        .offcanvas-header {
+          display: none;
+        }
+
+        .offcanvas-body {
+          display: flex;
+          flex-grow: 0;
+          padding: 0;
+          overflow-y: visible;
+          // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+          background-color: transparent !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
   }
 }
 
+
+// .offcanvas {
+//   position: fixed;
+//   bottom: 0;
+//   z-index: $zindex-offcanvas;
+//   display: flex;
+//   flex-direction: column;
+//   max-width: 100%;
+//   color: $offcanvas-color;
+//   visibility: hidden;
+//   background-color: $offcanvas-bg-color;
+//   background-clip: padding-box;
+//   outline: 0;
+//   @include box-shadow($offcanvas-box-shadow);
+//   @include transition(transform $offcanvas-transition-duration ease-in-out);
+
+//   &.showing,
+//   &.show:not(.hiding) {
+//     transform: none;
+//   }
+
+//   &.showing,
+//   &.hiding,
+//   &.show {
+//     visibility: visible;
+//   }
+// }
+
 .offcanvas-backdrop {
   @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
 }
@@ -54,37 +145,37 @@
   overflow-y: auto;
 }
 
-.offcanvas-start {
-  top: 0;
-  left: 0;
-  width: $offcanvas-horizontal-width;
-  border-right: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateX(-100%);
-}
+// .offcanvas-start {
+//   top: 0;
+//   left: 0;
+//   width: $offcanvas-horizontal-width;
+//   border-right: $offcanvas-border-width solid $offcanvas-border-color;
+//   transform: translateX(-100%);
+// }
 
-.offcanvas-end {
-  top: 0;
-  right: 0;
-  width: $offcanvas-horizontal-width;
-  border-left: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateX(100%);
-}
+// .offcanvas-end {
+//   top: 0;
+//   right: 0;
+//   width: $offcanvas-horizontal-width;
+//   border-left: $offcanvas-border-width solid $offcanvas-border-color;
+//   transform: translateX(100%);
+// }
 
-.offcanvas-top {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: $offcanvas-vertical-height;
-  max-height: 100%;
-  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateY(-100%);
-}
+// .offcanvas-top {
+//   top: 0;
+//   right: 0;
+//   left: 0;
+//   height: $offcanvas-vertical-height;
+//   max-height: 100%;
+//   border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+//   transform: translateY(-100%);
+// }
 
-.offcanvas-bottom {
-  right: 0;
-  left: 0;
-  height: $offcanvas-vertical-height;
-  max-height: 100%;
-  border-top: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateY(100%);
-}
+// .offcanvas-bottom {
+//   right: 0;
+//   left: 0;
+//   height: $offcanvas-vertical-height;
+//   max-height: 100%;
+//   border-top: $offcanvas-border-width solid $offcanvas-border-color;
+//   transform: translateY(100%);
+// }
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 9f30f74e9..9356e9861 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -132,6 +132,51 @@ Try the top, right, and bottom examples out below.
 </div>
 {{< /example >}}
 
+## Responsive
+
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+
+Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
+
+<div class="bd-example">
+  <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
+
+  <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+
+  <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+      <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
+    </div>
+  </div>
+</div>
+
+```html
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
+
+<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
+  </div>
+</div>
+```
+
+Responsive offcanvas classes are available across for each breakpoint.
+
+- `.offcanvas`
+- `.offcanvas-sm`
+- `.offcanvas-md`
+- `.offcanvas-lg`
+- `.offcanvas-xl`
+- `.offcanvas-xxl`
+
 ## Backdrop
 
 Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.