diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-02-25 19:53:17 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-03-01 01:02:51 +0300 |
| commit | c0f30366ace5f607e0b70a0e0034d2e8254bad9b (patch) | |
| tree | 727f42db5c00eedaf2cf9c07f188f15014d2fb6a /site | |
| parent | efc59146671bb671993353cc1f0a0daff1bfe554 (diff) | |
Add centered dropdown and dropup options
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.1/components/dropdowns.md | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index c98dd778e0..4308d5c621 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -400,6 +400,23 @@ And putting it to use in a navbar: Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side. {{< /callout >}} +### Centered + +Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. + +{{< example >}} +<div class="dropdown-center"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> + Centered dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Action two</a></li> + <li><a class="dropdown-item" href="#">Action three</a></li> + </ul> +</div> +{{< /example >}} + ### Dropup Trigger dropdown menus above elements by adding `.dropup` to the parent element. @@ -459,6 +476,23 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. </div> ``` +### Dropup centered + +Make the dropup menu centered above the toggle with `.dropup-center` on the parent element. + +{{< example >}} +<div class="dropup-center"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> + Centered dropup + </button> + <ul class="dropdown-menu" aria-labelledby="dropupCenterBtn"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Action two</a></li> + <li><a class="dropdown-item" href="#">Action three</a></li> + </ul> +</div> +{{< /example >}} + ### Dropend Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element. |