From e029891967f53c6cd6ea0aba33519532753051f8 Mon Sep 17 00:00:00 2001
From: Adam Schoenfeld <adamrschoenfeld311@gmail.com>
Date: Wed, 9 Apr 2025 07:50:05 -0700
Subject: [PATCH] Docs: mention `data-bs-target` for offcanvas close buttons
 (#41325)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
---
 site/content/docs/5.3/components/offcanvas.md | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index ac257df242..3b934755a6 100644
--- a/site/content/docs/5.3/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -163,7 +163,16 @@ Change the appearance of offcanvases with utilities to better match them to diff
 
 {{< added-in "5.2.0" >}}
 
-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.
+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. Responsive offcanvas classes are available for each breakpoint.
+
+- `.offcanvas`
+- `.offcanvas-sm`
+- `.offcanvas-md`
+- `.offcanvas-lg`
+- `.offcanvas-xl`
+- `.offcanvas-xxl`
+
+To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
 
 {{< 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>
@@ -181,15 +190,6 @@ Responsive offcanvas classes hide content outside the viewport from a specified
 </div>
 {{< /example >}}
 
-Responsive offcanvas classes are available across for each breakpoint.
-
-- `.offcanvas`
-- `.offcanvas-sm`
-- `.offcanvas-md`
-- `.offcanvas-lg`
-- `.offcanvas-xl`
-- `.offcanvas-xxl`
-
 ## Placement
 
 There's no default placement for offcanvas components, so you must add one of the modifier classes below.