mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-24 14:13:06 +02:00
Add centered dropdown and dropup options
This commit is contained in:
@@ -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.
|
||||
|
Reference in New Issue
Block a user