Bootstrapのグリッドシステムを理解しよう

所要時間：120分

このレッスンでは、Bootstrap の土台となっている「グリッドシステム」について学習していきます。ベースとなる知識だけに、学習するボリュームの多いレッスンになっています。

理解できるまでは、じっくりと時間をかけながら学習に取り組んでいきましょう。

このレッスンの目標

  • Bootstrap のグリッドシステムについて理解する
  • グリッドシステムに関するオプションとコンテナの概念について理解する
  • グリッドシステムを使った基本的なコーディングができる

ここでは、グリッドシステムの解説と合わせて演習課題を用意していますので、「TODO」を実践しながら Bootstrap による HTML コーディングを実践してみましょう！

このレッスンで作るもの

このレッスンの演習課題では、Bootstrap のグリッドシステムを理解するために、最終的に以下のような Web ページを作成します。

ページ作成を通して、PC サイズ、タブレットサイズ、スマホサイズなど、どの端末でも均等にレイアウトされるグリッドシステムを理解していきます。

🔻PC サイズの表示

🔻 タブレットサイズの表示

🔻 スマホサイズの表示

それでは早速、Bootstrap の基本的な概念である「グリッドシステム」の学習に入っていきましょう。

グリッドシステムとは

まず、サイトの横幅を均等に分けるガイドラインのことを「グリッド」と呼びます。

Bootstrap のグリッドシステムとは、PC・スマホの画面を縦に 12 分割したガイドラインに沿ってレイアウトを管理する仕組みのことです。

グリッドシステムでは、12 分割されたグリッド上にコンテンツを配置するため、PC・スマホなどで画面幅が異なる場合にも、レイアウトの調整が容易になります。

イメージは、下記画像のようになります。

グリッドシステムの要点をまとめると、

  1. サイトの横幅を均等に分けるガイドラインを「グリッド」と呼ぶ
  2. Bootstrap では横幅を 12 分割したグリッドシステムを採用している
  3. グリッドに沿ってコンテンツを配置しておけば、PC・スマホなど画面幅が異なってもレイアウトの調整が容易になる

この 3 つがポイントになります。

グリッドオプションとコンテナについて

それでは次に、Bootstrap のグリッドシステムを支える様々な仕組み（グリッドオプション）と、コンテナについて確認していきましょう。

具体的には、以下の内容について解説していきます。

  1. Bootstrap の画面幅について
  2. Bootstrap のブレイクポイントについて
  3. Bootstrap のガターについて
  4. Bootstrap のグリッドの入れ子について
  5. Bootstrap のコンテナについて

これらの要素は Bootstrap を理解する上では欠かせない内容なので、適宜ノートにポイントを纏めるなどして、それぞれの特徴を覚えるようにしてください。

解説 1：Bootstrap の画面幅の定義について

まず最初に、Bootstrap の画面幅の定義について解説していきます。

画面幅とは、ユーザーがページを閲覧しているときの画面サイズのことを指しています。

スマホやタブレットが普及した現在では、PC だけでなく、様々な画面サイズで Web ページを閲覧することが一般的です。

そのため、Bootstrap では以下の画面幅を基準にレイアウトを切り替える仕組みがあります。

画面幅 呼び方（定義） クラス接頭辞
0px 以上 576px 未満 Extra small .col-
576px 以上 768px 未満 Small .col-sm-
768px 以上 992px 未満 Medium .col-md-
992px 以上 1200px 未満 Large .col-lg-
1200px 以上 Extra large .col-xl-

グリッドシステムを利用する際は、この画面幅を基本にレイアウトを組んでいくことになります。

クラス接頭辞などは、今後のレッスンでコーディングを実践しながら覚えていけば大丈夫です。

ここで覚えるポイントは、

  • Bootstrap には 5 つの画面幅の定義がある
  • 画面幅に応じて、Bootstrap では自動でレイアウトが切り替わる

この 2 点です。

参考：Bootstrap 公式リファレンス - Grid options

解説 2：ブレイクポイントとは？

次に、Bootstrap のブレイクポイントについて解説します。

ブレイクポイントとは、レイアウトの表示結果を切り替える際に基準となるポイントのことです。

Bootstrap では画面幅の定義で確認したように、5 つの基準ポイントがありました。

例えば、小さなスマホ画面でページを閲覧した際はこのレイアウトで表示する、PC のような大きな画面でページを閲覧した際はこのレイアウトで表示する、という感じでブレイクポイントを基準にレイアウトの切り替えが行われていくイメージです。

以下の画像で示すように、ブレイクポイントに応じて Bootstrap では自動でレイアウトを切り替えています。

参考：Bootstrap 公式リファレンス - Grid options

解説 3：ガターとは？

次は、Bootstrap のガターについて確認していきましょう。

ガターとは、レイアウトを調整するために各要素の間に設置されるスペースのことです。

Bootstrap のグリッドシステムを利用すると、各要素にデフォルトで左右 30px のガター（Gutter）が付きます。

これは、左右どちらかに 30px の余白が設定されているのではなく、実際には、各要素ごとに左右 15px の padding が適用され、隣接する要素の余白と合わせて 30px となっています。

例えば、以下のようなレイアウトを Bootstrap で作成すると、3 つ並んだ要素の間に 30px の余白がつくイメージです。

このように、グリッドシステムでは「各要素の間に 30px の余白ができる」と覚えておきましょう。

参考：Bootstrap 公式リファレンス - Gutters

解説 4：グリッドの入れ子とは？

Bootstrap の画面幅、ブレイクポイント、ガターの解説に続き、次は「グリッドの入れ子」について解説します。

基本的に、Bootstrap のグリッドシステムは画面を 12 分割してレイアウトを配置しますが、例えば、一部の要素を 9 分割した中で更に 12 分割のレイアウトを実現したい、という場合も考えられます。

Bootstrap ではこのような場合も想定しており、グリッドシステムの中には「グリッドの入れ子」という仕組みがあります。

具体的には以下のようなイメージです。

引用元：Bootstrap 公式リファレンス - Nesting

まず、赤枠部分のレイアウトは 12 分割の中で、9 個分の横幅を取るようになっています。（青枠部分の 3 個分は余白）

ここから更に、黄色枠で囲った部分は、通常の 12 分割の考え方で 6 対 6 の合計で 12 分割になるようなレイアウトになっています。そして、入れ子の部分は親要素を基準に 12 分割されるため、青枠部分にはみ出ないのがポイントです。

このような状態をグリッドの入れ子と呼び、Bootstrap で 2 カラムレイアウトのページなどで応用できます。

具体的には、以下のようなページがグリッドの入れ子を利用した例になります。

このように、Bootstrap のグリッドシステムでは 12 分割したレイアウトの入れ子ができることを覚えておきましょう。

グリッドの入れ子が使えると、Bootstrap を利用したサイト制作の幅が広がっていきます！

参考：Bootstrap 公式リファレンス - Nesting

解説 5：Bootstrap のコンテナとは？

それでは最後に、コンテナについて解説します。

Bootstrap におけるコンテナとは、画面に表示するコンテンツを画面の中央に配置するときに利用するボックスのことです。

下記のページでは、赤枠で囲った部分にコンテナが利用されています。そのため、PC などの画面幅の大きい端末で閲覧すると、コンテナで囲われた部分は一定の幅を保ち、左右には余白（青枠部分）ができるようになっています。

また、Bootstrap では左右に一定の余白を持たせる標準コンテナ以外にも、画面幅に応じて流動的に横幅が変化するコンテナも用意されています。

【コンテナの種類】

Bootstrap で利用できるコンテナの代表は以下の 2 つです。それぞれ、どのコンテナを利用するかによって付与するクラス名が変わってきます。

クラス名 効果
container 画面幅に応じて段階的に横幅が変化するコンテナを設置する
container-fluid 画面幅に応じてスムーズに横幅が変化するコンテナを設置する

各コンテナのイメージは以下のようになります。

container-fluid クラス を付与したコンテナの場合は、常に横幅が 100％になりますが、container クラス を付与した場合のコンテナは、以下のように画面幅に応じてコンテナの横幅が決まっていて、常に一定の余白が出るようになっています。

画面幅 コンテナの横幅
0px 以上 576px 未満(Extra small) 100%
576px 以上 768px 未満(Small) 540px
768px 以上 992px 未満(Medium) 720px
992px 以上 1200px 未満(Large) 960px
1200px 以上(Extra Large) 1140px

具体的なコーディング方法はレッスン後半で解説しますので、ここではコンテナの概要だけ押さえておきましょう。

参考：Bootstrap 公式リファレンス - Containers

理解度チェック：Bootstrap の基本をおさらいしよう

それでは、Bootstrap の基礎知識を定着させるため、以下の TODO に取り組んでください。

ここではソースコードの記述などは不要なため、使い慣れたメモ帳アプリやマナジョブのノート機能を活用して、 TODO の答えを自分の言葉でまとめるようにしてください。

TODO のあとに答えを載せているので、自分の解答と突き合わせて、ここまでの基礎知識が定着しているか理解度チェックをしておきましょう！

【TODO】

  1. Bootstrap のグリッドシステムとは何か。その特徴を 3 つほど書き出してください。
  2. グリッドシステムのガターでは、コンテンツの左右に何 px の余白ができるか答えてください。
  3. Bootstrap のコンテナの種類ごとに、それぞれの特徴を答えてください。

【答え】

TODO1 の解答例は、以下になります。

  1. サイトの横幅を均等に分けるガイドラインを「グリッド」と呼ぶ
  2. Bootstrap では横幅を 12 分割したグリッドシステムを採用している
  3. グリッドに沿ってコンテンツを配置しておけば、PC・スマホなど画面幅が異なってもレイアウトの調整が容易になる

TODO2 の答えは、以下になります。

  • 30px (カラムの両側に 15px）

TODO3 の答えは、以下になります。

  • container クラスを指定したコンテナは、各ブレイクポイントごとに横幅の定義が決まっている。
  • container-fluid クラスを指定したコンテナは、すべてのブレイクポイントで横幅が 100％になる。

TODO は正解できましたでしょうか？特徴のまとめ方に完全な正解はないので、要点が一致していれば OK です。

グリッドシステムを支える 3 つのクラス

グリッドシステムを使ったコーディングに入る前に、まずは 3 つのクラスについて理解しておきましょう。

これは、Bootstrap のグリッドシステムを支える土台のようなクラスです。

  1. コンテナクラス： .container
  2. ロークラス： .row
  3. カラムクラス： .col

Bootstrap のグリッドシステムは、この 3 つのクラスを利用して構成されるものなので、それぞれの役割について理解していきましょう。

それぞれのクラスの使い方は以下のようなイメージとなります。

まず、グリッドシステムでレイアウト管理したいコンテンツをコンテナクラスの .container で囲います。

その中に、行を表すロークラス .row を行単位で定義していきます。ロークラスは、必要な行数分をコンテナクラスの中に配置します。

最後に、ロークラスの中に 12 分割で管理していくカラムクラス .col- を定義します。カラムクラスは全体で 12 分割になるように数値を決めていき、ロークラスの中に設置します。

例えば、上記のイメージ図では、1 行目のロークラスの中に 4 カラム分のカラムクラスを 3 つ並べています。これは 4 カラム ×3 で合計 12 になっていることが分かると思います。

また、2 行目のロークラスの中は 6 カラム ×2 で合計 12 になっています。

このように、カラムの合計が 12 になるようにレイアウトを組むことがグリッドシステムの基本になります。

【学習ポイント】

ここでは、以下の 3 点がポイントになります。

  • コンテナクラスでレイアウト全体を囲う
  • ロークラスで行を定義する
  • カラムクラスで 12 分割の数値を決めていく

演習課題：グリッドシステムを使って画面をレイアウトしてみよう

それではレッスンの演習課題として、実際にグリッドシステムを使ったコーディングを実践してみましょう。

演習課題のコードでは、カラムに背景色をつけるため HTML ファイル内に直接記述した CSS コードと、Bootstrap であらかじめ用意されている Color ユーティリティの bg-{ 色の種類 } クラス を利用して背景色を付与しています。

Color ユーティリティについては、下記の公式リファレンスに詳細が纏まっています。

【TODO】

  • 前のレッスンで作成した Bootstrap のフォルダを VSCode で開いてください。
  • フォルダ Bootstrap の配下に grid.html という HTML ファイルを作成してください。
  • 【答え】に記載された見本コードを確認しながら、grid.html に実際にコーディングしてください。

【答え】

完成版のコードはこちらになります。

grid.html（完成コード）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <title>グリッドシステムの練習</title>
    <style>
      .row > .col,
      .row > [class^="col-"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        background-color: #ccc;
        overflow: hidden;
      }
    </style>
  </head>

  <body class="text-center">
    <h1 class="my-4">Bootstrapのグリッドシステム</h1>

    <h3>1列カラム × 12 = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
      </div>
    </div>

    <h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-2">col-2</div>
        <!-- col-2：2列分のカラム -->
        <div class="col-4 bg-warning">col-4</div>
        <!-- col-4：4列分のカラム -->
        <div class="col-6">col-6</div>
        <!-- col-6：6列分のカラム -->
      </div>
    </div>

    <h3>5列カラム + 7列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-5">col-5</div>
        <!-- col-5：5列分のカラム -->
        <div class="col-7 bg-warning">col-7</div>
        <!-- col-7：7列分のカラム -->
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

それぞれ、コードの意味を理解しながら、以下の流れでコーディングを進めてください。

ステップ ①：雛形コードを実装する

HTML ファイル全体の基本構成と、視覚的にグリッドシステムが分かりやすくなるように、スタイリング用の CSS を書いています。

※レッスンとは直接関係のないコードが多いので、雛形コードはコピー＆ペーストで OK です。

grid.html（雛形コード）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <title>グリッドシステムの練習</title>
    <style>
      .row > .col,
      .row > [class^="col-"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        background-color: #ccc;
        overflow: hidden;
      }
    </style>
  </head>

  <body class="text-center">
    <h1 class="my-4">Bootstrapのグリッドシステム</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

ステップ ②：12 分割したグリッドカラムを実装する

以下のコードを、h1 の見出しタグ配下に実装してください。

タグの構成がコンテナクラス、ロークラス、カラムクラスの順に入れ子構造になっているのを意識ながらコーディングしてみましょう。

※コードはできるだけコピペせず、実際にコードを打ち込みながらコーディングしてください。

grid.html（追加コード）

    <!-- 追加コード　※「Bootstrapのグリッドシステム」の見出し配下に追加 -->
    <h3>1列カラム × 12 = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
      </div>
    </div>

ステップ ③：3 分割したグリッドカラムを実装する

以下のコードを、ステップ ② で追加したコードの下に実装してください。

grid.html（追加コード）

    <!-- 追加コード　※ステップ②で追加したコードより下に追加 -->
    <h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-2">col-2</div>
        <!-- col-2：2列分のカラム -->
        <div class="col-4 bg-warning">col-4</div>
        <!-- col-4：4列分のカラム -->
        <div class="col-6">col-6</div>
        <!-- col-6：6列分のカラム -->
      </div>
    </div>

ステップ ④：2 分割したグリッドカラムを実装する

以下のコードを、ステップ ③ で追加したコードの下に実装してください。

grid.html（追加コード）

    <!-- 追加コード　※ステップ③で追加したコードより下に追加 -->
    <h3>5列カラム + 7列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-5">col-5</div>
        <!-- col-5：5列分のカラム -->
        <div class="col-7 bg-warning">col-7</div>
        <!-- col-7：7列分のカラム -->
      </div>
    </div>

完成版のコード

もう一度、完成版のコードを提示しますので、同じように実装できているか確認してみましょう。

コメントは表示結果に直接影響を与えないので、記載の有無は問いません。表示結果が同じようになっていれば OK です。

grid.html（完成コード）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <title>グリッドシステムの練習</title>
    <style>
      .row > .col,
      .row > [class^="col-"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        background-color: #ccc;
        overflow: hidden;
      }
    </style>
  </head>

  <body class="text-center">
    <h1 class="my-4">Bootstrapのグリッドシステム</h1>

    <h3>1列カラム × 12 = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1">col-1</div>
        <!-- col-1：1列分のカラム -->
        <div class="col-1 bg-warning">col-1</div>
        <!-- col-1：1列分のカラム -->
      </div>
    </div>

    <h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-2">col-2</div>
        <!-- col-2：2列分のカラム -->
        <div class="col-4 bg-warning">col-4</div>
        <!-- col-4：4列分のカラム -->
        <div class="col-6">col-6</div>
        <!-- col-6：6列分のカラム -->
      </div>
    </div>

    <h3>5列カラム + 7列カラム = 12列分</h3>
    <div class="container mb-4">
      <!-- container：箱 -->
      <div class="row">
        <!-- row：行 -->
        <div class="col-5">col-5</div>
        <!-- col-5：5列分のカラム -->
        <div class="col-7 bg-warning">col-7</div>
        <!-- col-7：7列分のカラム -->
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

【結果】

lg サイズ以上の画面幅の場合、以下のように表示されたら OK です。

md サイズ以下の画面幅の場合も、以下のように表示されたら OK です。

スマホなどの画面幅が狭い端末は、以下のように表示されたら OK です。

まとめ

このレッスンでは Bootstrap の 土台となるグリッドシステムの仕組みについて詳しく解説しました。

本レッスンの内容を理解できれば、これから学んでいく Bootstrap を利用した Web ページ作成もスムーズに取り組めるはずです。

最後に、今回のレッスンで確認した Bootstrap 公式のリファレンスをまとめておきますので、復習するときは以下の公式リファレンスも参考にしてください。

【公式リファレンス】

次のレッスン：Bootstrap でページ作成 ①（ナビバーの実装）