diff --git a/docs/components/button-group.md b/docs/components/button-group.md index cff38e1b1335f0d9d7d8e9028ed8714837c336c1..59a18e2627dd670d2ac7358ae8b80049e284fdaa 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> @@ -47,6 +47,36 @@ Combine sets of button groups into button toolbars for more complex components. </div> {% endexample %} +Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly. + +{% example html %} +<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> + <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="input-group"> + <span class="input-group-addon" id="btnGroupAddon">@</span> + <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon"> + </div> +</div> + +<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups"> + <div class="btn-group" 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="input-group"> + <span class="input-group-addon" id="btnGroupAddon2">@</span> + <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2"> + </div> +</div> +{% endexample %} + ## Sizing Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. @@ -102,6 +132,18 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** +<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> + <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> diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 0e63ecc54be2103563fa6fad82794e335d1fdeed..1d921a74a3e631b8b16d63c89b3ccc1186fae2ff 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -4,28 +4,26 @@ .btn-group, .btn-group-vertical { position: relative; - display: inline-block; + display: flex; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; - float: left; - margin-bottom: 0; + flex: 0 1 auto; - // Bring the "active" button to the front + // Bring the hover, focused, and "active" buttons to the fron to overlay + // the borders properly + @include hover { + z-index: 2; + } &:focus, &:active, &.active { z-index: 2; } - @include hover { - z-index: 2; - } } -} -// Prevent double borders when buttons are next to each other -.btn-group { + // Prevent double borders when buttons are next to each other .btn + .btn, .btn + .btn-group, .btn-group + .btn, @@ -36,18 +34,11 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-left: -$btn-toolbar-margin; // Offset the first child's margin - @include clearfix(); + display: flex; + justify-content: flex-start; - .btn-group, .input-group { - float: left; - } - - > .btn, - > .btn-group, - > .input-group { - margin-left: $btn-toolbar-margin; + width: auto; } } @@ -158,22 +149,14 @@ // .btn-group-vertical { - > .btn, - > .btn-group, - > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - } - - // Clear floats so dropdown menus can be properly placed - > .btn-group { - @include clearfix(); + display: inline-flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; - > .btn { - float: none; - } + .btn, + .btn-group { + width: 100%; } > .btn + .btn,