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

Update offcanvas.md

This commit is contained in:
Mark Otto 2025-04-03 11:46:59 -07:00 committed by Mark Otto
parent a5f359a049
commit 11608e4792
1 changed files with 9 additions and 11 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,9 +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 across for each breakpoint.
**Note:** To add a close button in a responsive offcanvas component, you must give the close button a `data-bs-target` attribute.
- `.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>
@ -183,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.