mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 14:13:06 +02:00
Code Issues Releases Wiki Activity

Add centered dropdown and dropup options

Browse Source
This commit is contained in:
Mark Otto
2022-02-25 08:53:17 -08:00
committed by Mark Otto
parent efc5914667
commit c0f30366ac
3 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
site/content/docs/5.1/components/dropdowns.md
View File

@@ -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.