# Button Group

### Basic Button Group

{% tabs %}
{% tab title="Basic Button Group" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoeuOqfJGwY8e2bFqiB%2F-Loi_Cc1qINfnBg0xG1U%2Fbasic-default.png?alt=media\&token=db00428e-d25b-423e-bf9b-95d0b3a15abb)

```markup
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>    
</div>
```

{% endtab %}

{% tab title="Outlined Button Group" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoeuOqfJGwY8e2bFqiB%2F-Loi_Iv91RtTZExe_N_4%2Fbsaic-outlined.png?alt=media\&token=8be6e992-09e7-4386-86f2-fc96ece7c80c)

```markup
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-primary">Left</button>
    <button type="button" class="btn btn-outline-primary">Middle</button>
    <button type="button" class="btn btn-outline-primary">Right</button>
</div>
```

{% endtab %}
{% endtabs %}

### Toolbar Button Group

{% tabs %}
{% tab title="Example 1" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoibRCYSskovMeHi88e%2Ftoolbar-example-1.png?alt=media\&token=aa0c4ece-61f6-4627-be34-bfb3abeb9725)

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2 mb-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group mr-2 mb-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-primary">5</button>
        <button type="button" class="btn btn-primary">6</button>
        <button type="button" class="btn btn-primary">7</button>
    </div>
    <div class="btn-group mb-2" role="group" aria-label="Third group">
        <button type="button" class="btn btn-primary">8</button>
    </div>
</div>
```

{% endtab %}

{% tab title="Example 2" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoibW2RV5MldnxYNF4e%2Ftoolbar-example-2.png?alt=media\&token=9d452829-19e1-4806-8a35-975a911287ee)

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2 mb-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-primary">1</button>
        <button type="button" class="btn btn-outline-primary">2</button>
        <button type="button" class="btn btn-outline-primary">3</button>
        <button type="button" class="btn btn-outline-primary">4</button>
    </div>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text" id="btnGroupAddon">@</div>
        </div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
    </div>
</div>
```

{% endtab %}

{% tab title="Example 3" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoibbILgfBp_NUk8kMc%2Ftoolbar-example-3.png?alt=media\&token=c822b88d-9f53-4346-ac0c-ac11f59dc698)

```markup
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mb-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
        <button type="button" class="btn btn-outline-secondary">4</button>
    </div>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text" id="btnGroupAddon2">@</div>
        </div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
    </div>
</div>
```

{% endtab %}
{% endtabs %}

### Nested Button Group

{% tabs %}
{% tab title="Basic" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-Loibvuzz-4xZ3ddDGn_%2Fbasic-nested.png?alt=media\&token=f99a5795-afdd-4935-aaad-84fa4fc0f471)

```markup
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
        </div>
    </div>
</div>
```

{% endtab %}

{% tab title="Outline" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoibzE7z0L0S3oYsUIu%2Foutline-nested.png?alt=media\&token=2dac8f77-7f74-4fad-9791-f2f3751c4efd)

```markup
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop2" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
        </div>
    </div>
</div>
```

{% endtab %}
{% endtabs %}

### Button Group Sizes

{% tabs %}
{% tab title="Default Size" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoicT7ZUbk2YvxcRZxC%2Fdefault-size-button-group.png?alt=media\&token=86670ae5-d9ce-4a69-a2fe-c6e63396e5a5)

```markup
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
```

{% endtab %}

{% tab title="Large Size" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoicaKb3mFz5aCJxb50%2Flarge-button-group.png?alt=media\&token=b60e2347-0579-4d51-82d5-355fd988cf58)

```markup
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
```

{% endtab %}

{% tab title="Small Size" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoickCwLxZ8zzVibSlZ%2Fsmall-size-button-group.png?alt=media\&token=8c3ae4f4-f9bf-4ef5-ade1-5aa9cc9b7f0d)

```markup
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group

{% tabs %}
{% tab title="Basic" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-Loid5Dm1fzyFB1svvcd%2Fvertical-basic.png?alt=media\&token=9daab64b-7357-4ccb-a6af-b57d433a69e9)

```markup
<div class="btn-group-vertical" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>
```

{% endtab %}

{% tab title="Outline" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-Loid8QFzcOlX1C50wi4%2Fvertical-outline.png?alt=media\&token=8d150c22-e36a-4194-9d35-a219f3df2688)

```markup
<div class="btn-group-vertical" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-primary">Top</button>
    <button type="button" class="btn btn-outline-primary">Middle</button>
    <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Nested Group Button

{% tabs %}
{% tab title="Basic" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-Loidu0PumdBPKrg5NV9%2Fvertical-nested.png?alt=media\&token=f6855c1a-294c-49ca-b83f-746a72d949f2)

```markup
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
        </div>
    </div>
</div>
```

{% endtab %}

{% tab title="Outline" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Loib8B2yLQhqeIUewxF%2F-LoidwZe_cWZ5U-yErcp%2Fvertical-nested-outline.png?alt=media\&token=314f2eac-9f5f-47b1-bf83-c1fcd208241b)

```markup
<div class="btn-group-vertical mb-2" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-outline-secondary">Button</button>
    <button type="button" class="btn btn-outline-secondary">Button</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop6" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop6">
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
        </div>
    </div>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group Sizes

{% tabs %}
{% tab title="Default" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoieCFbEarvyxMQZfOz%2F-LoieRyGDBKXTeLFDOyO%2Fsize-default-vertical.png?alt=media\&token=7a58ad51-02e9-4d87-adbc-255dd67088ae)

```markup
<div class="btn-group-vertical" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>
```

{% endtab %}

{% tab title="Large" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoieCFbEarvyxMQZfOz%2F-LoieUWFO_b-E00qegLN%2Fsize-large-vertical.png?alt=media\&token=759b86e0-541b-4124-97c1-d0eed2d9fde3)

```markup
<div class="btn-group-vertical btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>
```

{% endtab %}

{% tab title="Small" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoieCFbEarvyxMQZfOz%2F-LoiegqeVIn8990mCAC-%2Fsize-small-vertical.png?alt=media\&token=7a484952-cd21-4c51-91b6-709ebf3465be)

```markup
<div class="btn-group-vertical btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}