aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md')
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md17
1 files changed, 7 insertions, 10 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md
index b7dae56ab..098882064 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md
@@ -400,8 +400,7 @@ And putting it to use in a navbar:
## Directions
{{< callout info >}}
-#### RTL
-Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
+**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
{{< /callout >}}
### Centered
@@ -842,7 +841,7 @@ Separate groups of related menu items with a divider.
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
{{< example >}}
-<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
+<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
@@ -1026,7 +1025,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:
{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
-### Mixins
+### Sass mixins
Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
@@ -1057,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
### Via JavaScript
+{{< callout warning >}}
+Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api.
+{{< /callout >}}
+
Call the dropdowns via JavaScript:
```js
@@ -1064,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
```
-{{< callout info >}}
-##### `data-bs-toggle="dropdown"` still required
-
-Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{{< /callout >}}
-
### Options
{{< markdown >}}