Logo
Hi, Sean S

Button group 

<div>
  <b-button-group>
    <b-button>Button 1</b-button>
    <b-button>Button 2</b-button>
    <b-button>Button 3</b-button>
  </b-button-group>
</div>
<div class="mt-3">
  <b-button-group>
    <b-button variant="success">Success</b-button>
    <b-button variant="info">Info</b-button>
    <b-button variant="warning">Warning</b-button>
  </b-button-group>
</div>

Default button group and button group using contextual variants.

Sizing 

<div>
  <b-button-group>
    <b-button>Button 1</b-button>
    <b-button>Button 2</b-button>
    <b-button>Button 3</b-button>
  </b-button-group>
</div>
<div class="mt-3">
  <b-button-group size="sm">
    <b-button>Left</b-button>
    <b-button>Middle</b-button>
    <b-button>Right</b-button>
  </b-button-group>
</div>
<div class="mt-3">
  <b-button-group size="lg">
    <b-button>Left</b-button>
    <b-button>Middle</b-button>
    <b-button>Right</b-button>
  </b-button-group>
</div>

Set the size prop to lg or sm to render larger or smaller, respectively, buttons. There is no need to specify the size on the individual buttons.

Vertical variation 

<b-button-group vertical>
  <b-button>Top</b-button>
  <b-button>Middle</b-button>
  <b-button>Bottom</b-button>
</b-button-group>

Make a set of buttons appear vertically stacked rather than horizontally by setting the vertical prop. Split button dropdowns are not supported here.

Dropdown menu support 

<div>
  <b-button-group>
    <b-button>Button</b-button>
    <b-dropdown right text="Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-dropdown right split text="Split Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
  </b-button-group>
</div>

Add <b-dropdown> menus directly inside your <b-button-group>. Note that split dropdown menus are not supported when prop codevertical is set.