mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

Docs: mention data-bs-target for offcanvas close buttons (#41325)

Browse Source 
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
1 changed files with 10 additions and 10 deletions
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.