diff --git a/docs/components/button-group.md b/docs/components/button-group.md index a07677c07..178245e94 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -3,93 +3,83 @@ layout: page title: Button group --- -
-

Button groups

+Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons). -

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

+
+

Tooltips & popovers in button groups require special setting

+

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

+
-
-

Tooltips & popovers in button groups require special setting

-

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

-
+### Basic example -

Basic example

-

Wrap a series of buttons with .btn in .btn-group.

-
-
- - - -
-
-{% highlight html %} +Wrap a series of buttons with `.btn` in `.btn-group`. + +{% example html %}
-{% endhighlight %} +{% endexample %} -

Button toolbar

-

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

-
- -
-{% highlight html %} +### Button toolbar + +Combine sets of button groups into button toolbars for more complex components. + +{% example html %} -{% endhighlight %} +{% endexample %} -

Sizing

-

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

-
- - - -