From 9bb85b1e06ea2bfdc20549cae88abe931f36a3c0 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Tue, 30 Aug 2022 17:20:59 +0200 Subject: [PATCH] Change offcanvas to be more consistent with carousel and dropdown --- site/content/docs/5.2/components/offcanvas.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index a7384f978b79..c83e88716296 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -79,24 +79,6 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ {{< /example >}} -### Dark offcanvas - -{{< added-in "5.2.0" >}} - -Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. - -{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} -
-
-
Offcanvas
- -
-
-

Place offcanvas content here.

-
-
-{{< /example >}} - ### Body scrolling Scrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `` scrolling. @@ -155,6 +137,24 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi {{< /example >}} +## Dark offcanvas + +{{< added-in "5.2.0" >}} + +Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. + +{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +
+
+
Offcanvas
+ +
+
+

Place offcanvas content here.

+
+
+{{< /example >}} + ## Responsive {{< added-in "5.2.0" >}}