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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Step 2: ボタンを作成する 次に、ボタン要素を作成します。以下のコードは、2つのボタンを作成する例です。

<div class="btn-group" role="group" aria-label="Button Group">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-secondary">ボタン2</button>
</div>

上記のコードでは、btn-groupクラスを持つ<div>要素でボタンをグループ化しています。btnクラスを持つ<button>要素は、それぞれボタン1とボタン2を表しています。btn-primaryとbtn-secondaryクラスは、それぞれボタンのスタイルを指定します。

Step 3: スペースを追加する ボタン間にスペースを追加するために、btn-groupクラスにml-2クラスを追加します。以下のコードを<div>要素に追加してください。

<div class="btn-group ml-2" role="group" aria-label="Button Group">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-secondary">ボタン2</button>
</div>

ml-2クラスは、左側に2pxのマージンを追加します。必要に応じて、この値を調整することができます。

以上の手順に従うと、スペースを空けて並べられた2つのボタンが作成されます。この方法を使用すると、簡単に複数のボタンをサイドバイサイドに配置することができます。