diff options
| author | Mark Otto <[email protected]> | 2016-12-21 23:29:16 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-27 22:37:50 -0800 |
| commit | fd75c4127988a9d61c3fec208b398763b68ae338 (patch) | |
| tree | ee180ecdf5602b716d0ce6a4e0b41e8633cf9c33 /docs | |
| parent | 2cb2979908291faead4251ece787c9f4c40a0b28 (diff) | |
| download | bootstrap-fd75c4127988a9d61c3fec208b398763b68ae338.tar.xz bootstrap-fd75c4127988a9d61c3fec208b398763b68ae338.zip | |
revamp button group with flexbox
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/button-group.md | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/docs/components/button-group.md b/docs/components/button-group.md index cff38e1b1..f4c164749 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -26,17 +26,17 @@ Wrap a series of buttons with `.btn` in `.btn-group`. ## Button toolbar -Combine sets of button groups into button toolbars for more complex components. +Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. {% example html %} <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> - <div class="btn-group" role="group" aria-label="First group"> + <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> - <div class="btn-group" role="group" aria-label="Second group"> + <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> @@ -106,6 +106,18 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> + <button type="button" class="btn btn-secondary">Button</button> + <button type="button" class="btn btn-secondary">Button</button> + <button type="button" class="btn btn-secondary">Button</button> + <button type="button" class="btn btn-secondary">Button</button> + </div> +</div> + + +<div class="bd-example"> + <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> + <button type="button" class="btn btn-secondary">Button</button> + <button type="button" class="btn btn-secondary">Button</button> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown |