diff options
| author | Mark Otto <[email protected]> | 2016-12-27 14:37:17 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-27 22:37:50 -0800 |
| commit | a28f1199439b2ef33db3d387ab57df99b347b7c6 (patch) | |
| tree | 6444533361c0602b63b8021b37d9f77771327fc9 /docs | |
| parent | d2479cf5f0601e94e5729ddc4145c60e8b5208d8 (diff) | |
| download | bootstrap-a28f1199439b2ef33db3d387ab57df99b347b7c6.tar.xz bootstrap-a28f1199439b2ef33db3d387ab57df99b347b7c6.zip | |
follow up to the fix for #20506 with some docs examples of input groups in button toolbars
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/button-group.md | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/components/button-group.md b/docs/components/button-group.md index f4c164749..59a18e262 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -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. |