# Button Group

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FQ9J3xMbxjkwoL47OwAp2%2Fimage2017-10-8_17-11-16.png?alt=media&#x26;token=ffa9c78e-0fc7-4f2b-98b6-3db960e9dd89" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FrpjVe6taoRTE7lNZqDqA%2Fimage2017-10-8_17-13-34.png?alt=media&#x26;token=8ccb399d-99f8-4667-a3eb-2f3c7d48e037" alt=""><figcaption></figcaption></figure>

## Description

The Button Group macro offers a container for other Bootstrap buttons. The buttons are then displayed in a horizontal or vertical order and aligned to each other.

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Button Group” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FeQ1y01Px8G1pvIhboGN9%2Fimage2017-10-8_17-18-40-768x467.png?alt=media&#x26;token=2ac131eb-fc31-4752-8428-9ccb4765d64c" alt=""><figcaption></figcaption></figure>

### **Size**

| Option     | Description                                                                                              |
| ---------- | -------------------------------------------------------------------------------------------------------- |
| **Large**  | Displays all buttons inside the macro body in large size, independent from the button’s individual size. |
| **Normal** | Displays the buttons individual sizes. Only use same size buttons inside the macro body!                 |
| **Small**  | Displays all buttons inside the macro body in small size, independent from the button’s individual size. |

### **Vertical**

Shows the buttons in a vertical order.

### Restrictions

**Subsequent Button Group Macros**

Always make sure you have at least one paragraph in between two Button Group macros. It is recommended to use different page divisions. Otherwise the button groups might overlap.

### **Single linked button in vertical order**

If you have a single linked button in a vertical button group, the sizing might be off. In that case, link all other buttons to a dummy link “#”.

### **Button Styles**

The Button Group macro only works with the flat button styles.