Bootstrap でページ作成 ②（カードの実装）

所要時間：60分

このレッスンでは、Bootstrap でよく利用するコンポーネントの一つである「カード」の扱い方について学習していきます。

このレッスンの目標

  • Bootstrap の「カード」コンポーネントを理解する
  • 料金プランページのメインコンテンツ部分（カード）の実装が完成している

このレッスンで作るもの

演習課題では、以下のような料金プランページのメインコンツ部分を作成していきます。（赤枠で囲った部分）

スマホなど画面サイズの小さい端末で表示すると、以下のようになります。

それでは早速、カードコンポーネントの学習に入っていきましょう。

カード(Cards)の基本的な使い方

はじめに、Bootstrap の公式リファレンスで紹介されている、カードのテンプレートコードを解説していきます。

カードのテンプレートコードは、以下のリンクから確認できます。

Bootstrap 公式リファレンス - Cards

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

テンプレートコードを確認すると、カードコンポーネントのコードは以下のようになっていると思います。

<div class="card" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap のカードは、枠で囲まれたひとまとまりのコンテンツを作成するためのコンポーネントです。コンポーネント内には画像、テキスト、リストグループ、リンクなど、さまざまなコンテンツを含めることができます。

それでは早速、カードコンポーネントのコード解説を見ていきましょう。

コード解説 1：カードの作成方法

まず、カードを作成するには、コンポーネント全体を包括する要素に card クラス を追加し、枠の中に含まれる子要素に以下のようなクラスを追加していきます。

【カード枠内の子要素に使用される主なクラス】

クラス 概要
card-body カードの本文エリアを作成
card-title h 要素に追加し、カードの見出しを作成
card-subtitle h 要素に追加し、カードの副見出しを作成
card-text p 要素などのテキスト要素に追加し、カードのテキストを作成
card-link a 要素などに追加し、カードのリンクを作成
card-img-top img 要素などに追加し、カード上部に画像を配置
card-img-bottom img 要素などに追加し、カード下部に画像を配置
card-header カードのヘッダーエリアを作成
card-footer カードのフッターエリアを作成

上記のクラス概要を踏まえて、もう一度サンプルコードを確認してみましょう。カードコンポーネントが理解しやすいように、各クラス部分にコメントを付与しています。

<!-- カードの枠：card -->
<div class="card" style="width: 18rem;">

  <!-- カード上部にレイアウトされる画像：card-img-top -->
  <svg class="bd-placeholder-img card-img-top" ...省略 ></svg>

  <!-- カード本文：card-body -->
  <div class="card-body">

    <!-- カード見出し：card-title -->
    <h5 class="card-title">Card title</h5>

    <!-- カードの内容文：card-text -->
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

このテンプレートコードで作成できるカードレイアウトは、公式リファレンスに掲載されている以下のレイアウトになります。

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

先程、コードのコメントに記述したように、まずカードの枠を形作る親要素に card クラス を追加します。

次に、カード上部にレイアウトされる画像には svg 要素（img 要素でも可）に card-img-top クラス を追加し、カードの本文エリアとなる要素には card-body クラス を追加しています。

さらに、カード本文の中では、カードの見出しとなる要素に card-title クラス を追加し、内容文となる要素には card-text クラス を追加してレイアウトを組み立てています。

テンプレートコードの解説は以上です。

コード解説 2：カードのスタイルを変更する方法

ここからは、カードのスタイルを変更する方法など、知っておくと便利なカードコンポーネントのオプションについて解説します。

カードには、背景、ボーダー、色をカスタマイズするための様々なオプションがあります。

ここでは、以下の 2 つを紹介します。

  • カードの背景色や文字色を設定する方法
  • カードのボーダー色を設定する方法

【カードの背景色や文字色を設定する方法】

カードの色を変更する際は、Bootstrap で用意されている Color ユーティリティの text-{ 色の種類 } クラス や bg-{ 色の種類 } クラス を利用してカスタマイズできます。

Color ユーティリティについては、様々なバリエーションが用意されているので、下記の公式リファレンスをご確認ください。

以下のコードで示すように、文字色や背景色を変更して見た目を変えていくことができます。

<!-- 背景色、文字色指定なし -->
<div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色、文字色指定なし</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-primary、文字色：text-white -->
<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-primary、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-secondary、文字色：text-white -->
<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-secondary、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-success、文字色：text-white -->
<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-success、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-danger、文字色：text-white -->
<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-danger、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-warning、文字色：text-white -->
<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-warning、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-info、文字色：text-white -->
<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-info、文字色：text-white</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-light -->
<div class="card bg-light mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-light</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- 背景色：bg-dark、文字色：text-white -->
<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

表示結果は、以下のようになります。

【カードのボーダー色を設定する方法】

次に、カードのボーダー色を変更する方法を見ていきます。

カードのボーダー色を変更する際は、Bootstrap で用意されている Border ユーティリティの border-{ 色の種類 } クラス を利用してカスタマイズできます。

Border ユーティリティについては、様々なバリエーションが用意されているので、下記の公式リファレンスをご確認ください。

以下のコードが実際にカードのボーダー色を変更した例になります。

<!-- カード枠のボーダー色：変更なし -->
<div class="card mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色：変更なし -->
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

<!-- カード枠のボーダー色：青 border-primary -->
<div class="card border-primary mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色：青 border-primary -->
    <div class="card-header border-primary">カードのヘッダー</div>
    <div class="card-body">
        <h4 class="card-title">カードの見出し</h4>
        <p class="card-text">カードの内容文が入ります。</p>
    </div>
</div>

表示結果は、以下のようになります。

コード解説 3：カードデッキによるレイアウト方法

最後は、カードのレイアウト方法について解説します。

Bootstrap のカードには、カードグループ、カードデッキ、カードカラムといった、カードをレイアウトする様々なオプションが用意されています。

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

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

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

ここでは、演習課題でも実際に使用しているレイアウト方法である、カードデッキによるレイアウト方法を解説します。

カードデッキは、一連のカードを連結せずに均一サイズでグループ化するコンポーネントです。カードデッキを作成する場合は、一連のカードの親要素に card-deck クラス を追加します。

以下のコードが実際にカードデッキでレイアウトした例になります。

<!-- カードデッキ：card-deck -->
<div class="card-deck">

    <!-- カード01 -->
    <div class="card">
        <img class="card-img-top" src="http://placehold.jp/24/cccccc/ffffff/318x180.png?text=.card-ima-top" alt="...">
        <div class="card-body">
            <h4 class="card-title">カード01</h4>
            <p class="card-text">カードの内容文が入ります。</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">カードのフッター</small>
        </div>
    </div>

    <!-- カード02 -->
    <div class="card">
        <img class="card-img-top" src="http://placehold.jp/24/cccccc/ffffff/318x180.png?text=.card-ima-top" alt="...">
        <div class="card-body">
            <h4 class="card-title">カード02</h4>
            <p class="card-text">カードの内容文が入ります。カードの内容文が入ります。</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">カードのフッター</small>
        </div>
    </div>

    <!-- カード03 -->
    <div class="card">
        <img class="card-img-top" src="http://placehold.jp/24/cccccc/ffffff/318x180.png?text=.card-ima-top" alt="...">
        <div class="card-body">
            <h4 class="card-title">カード03</h4>
            <p class="card-text">カードの内容文が入ります。</p>
            <p class="card-text">カードの内容文が入ります。カードの内容文が入ります。</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">カードのフッター</small>
        </div>
    </div>

</div>

表示結果は、以下のようになります。

card-deck クラス を追加することで、このような縦横の幅が均一になったカードレイアウトが実装できました。

カードコンポーネントの解説は、これで終わりです。

レッスンの演習課題では、実際にコーディングを進めながら、カードコンポーネントの扱い方を学んでいきます。

演習課題：カードで料金プランページのメインコンテンツを作成しよう

それではレッスンの演習課題として、料金プランページのメインコンツ（見出しと料金プラン）を作成してみましょう。

【TODO】

  • 前のレッスンで作成した price.html の HTML ファイルを編集できる状態にしてください。
  • 【答え】に記載された見本コードを確認しながら、料金プランの見出し部分とカード部分をコーディングしてください。
  • レッスンの「まとめ」に記載した公式リファレンスを参照して、各種ユーティリティの使い方を確認してください。

【答え】

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

price.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>
</head>

<body>

  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white p-3 mb-3 border-bottom shadow-sm">
    <a class="navbar-brand" href="#">マナジョブ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー4</a>
        </li>
      </ul>
      <a class="btn btn-outline-primary ml-lg-4" href="#">ログイン</a>
    </div>
  </nav>

  <!-- 見出し -->
  <div class="pricing-header px-3 py-3 mx-auto text-center" style="max-width: 700px;">
    <h1 class="display-4">料金プラン</h1>
    <p class="lead">ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。</p>
  </div>

  <!-- 料金プラン -->
  <div class="container">

    <!-- カードデッキ：card-deck -->
    <div class="card-deck mb-3 text-center">

      <!-- カード01：フリー会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">フリー会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">無料</h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">利用中</button>
        </div>
      </div>

      <!-- カード02：ライト会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">ライト会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥2,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

      <!-- カード03：プロ会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">プロ会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥4,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

    </div><!-- /.card-deck -->

  </div><!-- /.container -->

  <!-- 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>

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

ステップ ①：見出し部分を実装する

以下のコードを、前回のレッスンで実装したナビゲーションバーの実装コードより下に追加します。

price.html（追加コード）

  <!-- 追加コード：ナビゲーションバーのコードより下に実装する -->
  <!-- 見出し -->
  <div class="pricing-header px-3 py-3 mx-auto text-center" style="max-width: 700px;">
    <h1 class="display-4">料金プラン</h1>
    <p class="lead">ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。</p>
  </div>

ステップ ②：コンテナとカードの大枠を実装する

次に、見出し部分のコードより下に、コンテンツ全体の余白を調整するためのコンテナクラスと、カードコンポーネントを纏めるカードデッキクラスを実装します。

price.html（追加コード）

  <!-- 追加コード：ステップ①のコードより下に実装する -->
  <!-- 料金プラン -->
  <div class="container">

    <!-- カードデッキ：card-deck -->
    <div class="card-deck mb-3 text-center">

    </div><!-- /.card-deck -->

  </div><!-- /.container -->

ステップ ③：カードの中身を実装する

最後に、カードデッキの中に、3 つのカードコンポーネントを実装していきます。

price.html（追加コード）

      <!-- 追加コード：ステップ②で追加したカードデッキクラスの中に実装する -->
      <!-- カード01：フリー会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">フリー会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">無料</h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">利用中</button>
        </div>
      </div>

      <!-- カード02：ライト会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">ライト会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥2,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

      <!-- カード03：プロ会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">プロ会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥4,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

完成版のコード

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

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

price.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>
</head>

<body>

  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white p-3 mb-3 border-bottom shadow-sm">
    <a class="navbar-brand" href="#">マナジョブ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー4</a>
        </li>
      </ul>
      <a class="btn btn-outline-primary ml-lg-4" href="#">ログイン</a>
    </div>
  </nav>

  <!-- 見出し -->
  <div class="pricing-header px-3 py-3 mx-auto text-center" style="max-width: 700px;">
    <h1 class="display-4">料金プラン</h1>
    <p class="lead">ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。</p>
  </div>

  <!-- 料金プラン -->
  <div class="container">

    <!-- カードデッキ：card-deck -->
    <div class="card-deck mb-3 text-center">

      <!-- カード01：フリー会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">フリー会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">無料</h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">利用中</button>
        </div>
      </div>

      <!-- カード02：ライト会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">ライト会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥2,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

      <!-- カード03：プロ会員 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">プロ会員</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">￥4,980 <small class="text-muted">/ 月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>まずは、30日間</li>
            <li>無料でお試しください</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">今すぐ利用開始する</button>
        </div>
      </div>

    </div><!-- /.card-deck -->

  </div><!-- /.container -->

  <!-- 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 公式のリファレンスをまとめておきますので、復習するときは以下の公式リファレンスも参考にしてください。

【公式リファレンス】

次のレッスン：Bootstrap でページ作成 ③（フッターの実装）