Bootstrapを使用してスペースを空けた並べられた2つのボタンを作成する方法

以下に、いくつかの方法をコード例とともに示します。

グリッドシステムを使用する方法: Bootstrapのグリッドシステムを使用して、2つのボタンを並べて配置することができます。以下の例では、2つのボタンを含む2つのカラムを作成し、それらの間に適切なスペースを追加しています。

<div class="row">
  <div class="col">
    <button class="btn btn-primary">ボタン1</button>
  </div>
  <div class="col">
    <button class="btn btn-secondary">ボタン2</button>
  </div>
</div>

Flexboxを使用する方法: Flexboxを使用して、2つのボタンを並べて配置し、スペースを追加することもできます。以下の例では、親要素にd-flexクラスを追加し、ボタン間のスペースをjustify-content-betweenクラスで指定しています。

<div class="d-flex justify-content-between">
  <button class="btn btn-primary">ボタン1</button>
  <button class="btn btn-secondary">ボタン2</button>
</div>

インライン要素を使用する方法: もし、ボタンをブロック要素ではなくインライン要素として表示したい場合は、d-inline-blockクラスを使用することができます。以下の例では、2つのボタンにd-inline-blockクラスを追加しています。

<button class="btn btn-primary d-inline-block">ボタン1</button>
<button class="btn btn-secondary d-inline-block">ボタン2</button>

これらの方法を使用すると、Bootstrapを活用しながら、スペースを空けた並べられた2つのボタンを作成することができます。必要に応じて、ボタンのスタイルやサイズを調整することもできます。