Skip to content

Commit cb8ee4e

Browse files
authored
Update offcanvas.md
1 parent 2e482ef commit cb8ee4e

File tree

1 file changed

+9
-11
lines changed

1 file changed

+9
-11
lines changed

site/content/docs/5.3/components/offcanvas.md

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,16 @@ Change the appearance of offcanvases with utilities to better match them to diff
163163

164164
{{< added-in "5.2.0" >}}
165165

166-
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.
166+
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.
167167

168-
**Note:** To add a close button in a responsive offcanvas component, you must give the close button a `data-bs-target` attribute.
168+
- `.offcanvas`
169+
- `.offcanvas-sm`
170+
- `.offcanvas-md`
171+
- `.offcanvas-lg`
172+
- `.offcanvas-xl`
173+
- `.offcanvas-xxl`
174+
175+
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`.
169176

170177
{{< example >}}
171178
<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
183190
</div>
184191
{{< /example >}}
185192

186-
Responsive offcanvas classes are available across for each breakpoint.
187-
188-
- `.offcanvas`
189-
- `.offcanvas-sm`
190-
- `.offcanvas-md`
191-
- `.offcanvas-lg`
192-
- `.offcanvas-xl`
193-
- `.offcanvas-xxl`
194-
195193
## Placement
196194

197195
There's no default placement for offcanvas components, so you must add one of the modifier classes below.

0 commit comments

Comments
 (0)