Bootstrapを使用して横並びのスパンを作成する方法

Bootstrapのセットアップ: まず、Bootstrapをウェブサイトに組み込むために必要なファイルをダウンロードし、HTMLファイルにリンクします。以下の例では、BootstrapのCDN（コンテンツデリバリーネットワーク）を使用しています。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- ここにコンテンツを追加 -->
</body>
</html>

横並びのスパンを作成する: Bootstrapでは、rowクラスを使用して横並びのコンテナを作成し、その中にcolクラスを使用してスパンを配置します。スパンの幅は、col-プレフィックスに続く数字で指定します。

以下の例では、2つのスパンを横並びに配置しています。1つのスパンは6つのカラム幅を占有し、もう1つのスパンは6つのカラム幅を占有します。

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- ここに最初のスパンのコンテンツを追加 -->
    </div>
    <div class="col-6">
      <!-- ここに2番目のスパンのコンテンツを追加 -->
    </div>
  </div>
</div>

レスポンシブなデザインの適用: Bootstrapはデフォルトでレスポンシブなデザインを提供しており、異なるデバイスや画面サイズに適応します。スパンの幅を調整するために、さまざまなcol-クラスを使用することができます。

以下の例では、大画面（lg）ではスパンが6つのカラム幅を占有し、中画面（md）ではスパンが4つのカラム幅を占有するように設定しています。

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-4">
      <!-- ここに最初のスパンのコンテンツを追加 -->
    </div>
    <div class="col-lg-6 col-md-8">
      <!-- ここに2番目のスパンのコンテンツを追加 -->
    </div>
  </div>
</div>