root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 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" >}} {{< 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 >}} {{< 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> <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> </div>
{{< /example >}} {{< /example >}}
Responsive offcanvas classes are available across for each breakpoint.
- `.offcanvas`
- `.offcanvas-sm`
- `.offcanvas-md`
- `.offcanvas-lg`
- `.offcanvas-xl`
- `.offcanvas-xxl`
## Placement ## Placement
There's no default placement for offcanvas components, so you must add one of the modifier classes below. There's no default placement for offcanvas components, so you must add one of the modifier classes below.