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" >}} {{< 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.