rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Update dropdowns.md

Browse Source
This commit is contained in:
Mark Otto 2024-03-18 19:39:17 -07:00 committed by GitHub
parent e0bb4ffd0e
commit 62316f5409
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
site/content/docs/5.3/components/dropdowns.md
View File

@ -408,31 +408,31 @@ And putting it to use in a navbar:
Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
{{< example >}} {{< example >}}
<div class="d-inline-grid d-md-inline-flex gap-4"> <div class="dropdown-center">
<div class="dropdown-center"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Centered dropdown
Centered dropdown </button>
</button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li>
<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 two</a></li> <li><a class="dropdown-item" href="#">Action three</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li> </ul>
</ul> </div>
</div> {{< /example >}}
<div class="btn-group dropdown-center"> {{< example >}}
<button class="btn btn-secondary" type="button"> <div class="btn-group dropdown-center">
Centered dropdown <button class="btn btn-secondary" type="button">
</button> Split dropdown
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> </button>
<span class="visually-hidden">Toggle Dropdown</span> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
</button> <span class="visually-hidden">Toggle Dropdown</span>
<ul class="dropdown-menu"> </button>
<li><a class="dropdown-item" href="#">Action</a></li> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li> <li><a class="dropdown-item" href="#">Action two</a></li>
</ul> <li><a class="dropdown-item" href="#">Action three</a></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}