diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index a65b653a1e7881afa15b9c643c0c71a162c62e67..c9e65440cf15f07efda37cabd49b085dba20cb5d 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -247,60 +247,31 @@ We use this extra class to reduce the horizontal `padding` on either side of the
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="bd-example">
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
- Large button
- </button>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- <div class="btn-group ml-2">
- <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
- <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
- <span class="visually-hidden">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
- Small button
- </button>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- <div class="btn-group ml-2">
- <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
- <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
- <span class="visually-hidden">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
+ <div class="btn-group">
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ Large button
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
+ <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
</div>
{{< highlight html >}}
@@ -324,8 +295,37 @@ Button dropdowns work with buttons of all sizes, including default and split dro
...
</ul>
</div>
+{{< /highlight >}}
-<!-- Small button groups (default and split) -->
+<div class="bd-example">
+ <div class="btn-group">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ Small button
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
+ <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+</div>
+
+{{< highlight html >}}
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button