0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/docs/components/button-group.md
Mark Otto 7bf868a709 v4: Social meta tags (#20825)
* descriptions for getting started pages

* descriptions for layout

* add content page descriptions

* more descriptions, updates to some existing ones

* correct site url

* add social stuff to config for twitter cards

* add twitter meta tags; use large image for homepage and regular card for all others

* add the assets

* more site config

* more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
2016-10-02 18:19:47 -07:00

6.6 KiB

layout title description group
docs Button group Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. components

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]({{ site.baseurl }}/components/buttons/#button-plugin).

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

Basic example

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

{% example html %}

Left Middle Right
{% endexample %}

Button toolbar

Combine sets of button groups into button toolbars for more complex components.

{% example html %}

1 2 3 4
5 6 7
8
{% 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.

Left Middle Right

Left Middle Right

Left Middle Right

{% highlight html %}

...
...
...
{% endhighlight %}

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

{% example html %}

{% endexample %}

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Button Button Button Button

{% highlight html %}

...
{% endhighlight %}

Tooltips and popovers

Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. 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).