root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Docs: mention `data-bs-target` for offcanvas close buttons (#41325)
BrowserStack / browserstack (push) Waiting to run Details
Bundlewatch / bundlewatch (push) Waiting to run Details
CodeQL / Analyze (push) Waiting to run Details
cspell / cspell (push) Waiting to run Details
CSS / css (push) Waiting to run Details
Docs / docs (push) Waiting to run Details
JS Tests / JS Tests (push) Waiting to run Details
Lint / lint (push) Waiting to run Details
CSS (node-sass) / css (push) Waiting to run Details
Release notes / update_release_draft (push) Waiting to run Details 

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Adam Schoenfeld 2025-04-09 07:50:05 -07:00 committed by GitHub
parent 690fbfdbd4
commit e029891967
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
site/content/docs/5.3/components/offcanvas.md
View File

@ -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.