Bootstrap 5を使用したサイドバイサイドのボタングループの作成方法

方法1: Flexboxを使用する方法

<div class="d-flex">
  <div class="btn-group me-2" role="group" aria-label="Button group 1">
    <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>
  </div>
  <div class="btn-group" role="group" aria-label="Button group 2">
    <button type="button" class="btn btn-secondary">ボタン4</button>
    <button type="button" class="btn btn-secondary">ボタン5</button>
    <button type="button" class="btn btn-secondary">ボタン6</button>
  </div>
</div>

方法2: グリッドシステムを使用する方法

<div class="row">
  <div class="col">
    <div class="btn-group" role="group" aria-label="Button group 1">
      <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>
    </div>
  </div>
  <div class="col">
    <div class="btn-group" role="group" aria-label="Button group 2">
      <button type="button" class="btn btn-secondary">ボタン4</button>
      <button type="button" class="btn btn-secondary">ボタン5</button>
      <button type="button" class="btn btn-secondary">ボタン6</button>
    </div>
  </div>
</div>

上記のコード例では、方法1ではFlexboxを使用し、方法2ではBootstrapのグリッドシステムを使用しています。どちらの方法でも、btn-groupクラスを使用してボタングループを作成し、必要なボタンを追加しています。サイドバイサイドに配置するために、要素を適切に配置するためのクラス（d-flexまたはcol）を使用しています。

これらの例を使用して、Bootstrap 5を使用してサイドバイサイドのボタングループを作成する方法を理解できると思います。必要に応じて、デザインやスタイルをカスタマイズすることもできます。