Bootstrap 5.3の使い方｜CDN導入からコンポーネントまでコピペ可

Bootstrap とは、クラス名を書くだけでレスポンシブなレイアウトとボタン・カード・モーダルなどの部品が使える、CSSとJavaScriptのフレームワークです。 2026年10月1日時点の最新版は 5.3.8（npm の latest、2025年8月公開）で、jQuery は不要、CDN の <link> と <script> を2行貼るだけで使い始められます。

この記事では、公式リポジトリの設定ファイルに書かれた CDN の URL と integrity をそのまま掲載し、npm から取得したファイルのハッシュとも一致することを確認しました。さらに、navbar からフッターまで入った丸ごとコピペできるページ雛形を用意し、Playwright（ブラウザ自動操作ツール）で画面幅ごとの列数、modal の開閉、ダークモードの切り替えを実際に検証した結果を表で載せています。

Bootstrap 5.3の早見表

CDNでBootstrap 5.3.8を導入する

<head> に CSS、</body> の直前に JS を1行ずつ貼るだけで導入できます。 以下は公式リポジトリ（twbs/bootstrap v5.3.8 の config.yml）に記載された値そのままです。npm から取得した 5.3.8 のファイルで openssl dgst -sha384 を計算した値とも一致しました。

<!-- CSS：<head> 内 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<!-- JS：</body> の直前（Popper 同梱版） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

integrity は「ファイルが改ざんされていないか」をブラウザが確かめるためのハッシュ値です。 バージョンを変えるときは、URL と integrity を必ずセットで公式の値に差し替えます（URL だけ変えると読み込みがブロックされます）。

JSファイルの選び方

Popper を別に読み込む場合の公式の値は次のとおりです（Popper → Bootstrap の順）。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

npmで導入する

npm i bootstrap@5.3.8

ビルドツール（Vite など）を使う場合は、JS から読み込みます。

import "bootstrap/dist/css/bootstrap.min.css";
import * as bootstrap from "bootstrap";

丸ごとコピペできるページ雛形

navbar・ヒーロー・グリッド・card・form・modal・toast・footer とダークモード切替を1ファイルにまとめました。 下のHTMLを index.html として保存し、ブラウザで開くだけで動きます。

<!doctype html>
<html lang="ja" data-bs-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5.3 サンプル</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">SampleShop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
              aria-controls="mainNav" aria-expanded="false" aria-label="メニューを開く">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">ホーム</a></li>
          <li class="nav-item"><a class="nav-link" href="#items">商品</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">お問い合わせ</a></li>
        </ul>
        <button id="themeToggle" class="btn btn-outline-secondary btn-sm" type="button">ダークモード切替</button>
      </div>
    </div>
  </nav>

  <!-- ヒーロー -->
  <header class="py-5 bg-body-secondary">
    <div class="container py-4 text-center">
      <h1 class="display-5 fw-bold">Bootstrap 5.3 で作るページ</h1>
      <p class="lead text-body-secondary col-lg-8 mx-auto">CDNを2行読み込むだけで、レスポンシブなレイアウトと部品が使えます。</p>
      <button class="btn btn-primary btn-lg" type="button" data-bs-toggle="modal" data-bs-target="#orderModal">注文する</button>
      <button id="toastBtn" class="btn btn-outline-primary btn-lg ms-2" type="button">通知を表示</button>
    </div>
  </header>

  <!-- グリッド＋カード -->
  <main class="container py-5" id="items">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">ノート</h5>
            <p class="card-text">A5サイズの方眼ノートです。</p>
          </div>
          <div class="card-footer bg-transparent"><span class="badge text-bg-success">在庫あり</span></div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">ボールペン</h5>
            <p class="card-text">0.5mmの黒インクです。</p>
          </div>
          <div class="card-footer bg-transparent"><span class="badge text-bg-warning">残りわずか</span></div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">付箋</h5>
            <p class="card-text">5色セットの付箋です。</p>
          </div>
          <div class="card-footer bg-transparent"><span class="badge text-bg-secondary">入荷待ち</span></div>
        </div>
      </div>
    </div>

    <!-- フォーム -->
    <section class="mt-5" id="contact">
      <h2 class="h4 mb-3">お問い合わせ</h2>
      <form class="row g-3 needs-validation" novalidate>
        <div class="col-md-6">
          <label for="name" class="form-label">お名前</label>
          <input type="text" class="form-control" id="name" required>
          <div class="invalid-feedback">お名前を入力してください。</div>
        </div>
        <div class="col-md-6">
          <label for="email" class="form-label">メールアドレス</label>
          <input type="email" class="form-control" id="email" required>
          <div class="invalid-feedback">メールアドレスの形式で入力してください。</div>
        </div>
        <div class="col-12">
          <label for="topic" class="form-label">種類</label>
          <select class="form-select" id="topic">
            <option>商品について</option>
            <option>配送について</option>
          </select>
        </div>
        <div class="col-12">
          <label for="message" class="form-label">内容</label>
          <textarea class="form-control" id="message" rows="3"></textarea>
        </div>
        <div class="col-12 form-check ms-1">
          <input class="form-check-input" type="checkbox" id="agree" required>
          <label class="form-check-label" for="agree">内容を確認しました</label>
        </div>
        <div class="col-12">
          <button class="btn btn-primary" type="submit">送信</button>
        </div>
      </form>
    </section>
  </main>

  <!-- モーダル -->
  <div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="orderModalLabel">注文の確認</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="modal-body">ノートを1点注文します。よろしいですか？</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">確定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- トースト -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="status" aria-live="polite" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">お知らせ</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
      </div>
      <div class="toast-body">カートに追加しました。</div>
    </div>
  </div>

  <!-- フッター -->
  <footer class="py-4 border-top">
    <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
      <span class="text-body-secondary">&copy; 2026 SampleShop</span>
      <ul class="nav">
        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">利用規約</a></li>
        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">プライバシー</a></li>
      </ul>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  <script>
    // トースト表示
    const toast = bootstrap.Toast.getOrCreateInstance(document.getElementById('liveToast'));
    document.getElementById('toastBtn').addEventListener('click', () => toast.show());

    // ダークモード切替（data-bs-theme を書き換える）
    document.getElementById('themeToggle').addEventListener('click', () => {
      const html = document.documentElement;
      html.dataset.bsTheme = html.dataset.bsTheme === 'dark' ? 'light' : 'dark';
    });

    // フォームの入力チェック
    document.querySelectorAll('.needs-validation').forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      });
    });
  </script>
</body>
</html>

雛形の要点

Playwrightで動作を検証した結果

上の雛形を npm の bootstrap 5.3.8 でローカル配信し、Playwright 1.56（Chromium）で自動検証しました。 CDN の URL だけをローカルパスに差し替え、それ以外は雛形と同じHTMLです。JavaScript のエラーは0件、bootstrap.Modal.VERSION は 5.3.8 でした。

ブレークポイントごとの列数

.row-cols-md-2 は 768px ちょうどで2列、.navbar-expand-lg は 992px ちょうどでメニューが横並びになりました。 指定がない幅（sm）は、小さい側の指定（row-cols-1）が引き継がれます。

modal・toast・フォームの動作

閉じた直後はフェードアニメーション中のため、背景（backdrop）が消えるまで少し時間がかかります。 閉じた後に処理を続けるなら hidden.bs.modal イベントを使うと確実です。

• トースト：ボタンクリック後、クラスが toast fade show になり表示されました
• フォーム：空のまま送信すると .was-validated が付き、.invalid-feedback が display: block になりました

ダークモード（data-bs-theme）の結果

Bootstrap 5.3 は OS のダーク設定に自動では追従しません。 OS に合わせたいときは、CSS より前に次のスクリプトを置きます（Playwright の emulateMedia({ colorScheme: "dark" }) で動作を確認済み）。

<script>
  // OSの設定に合わせて data-bs-theme を設定（CSSより前に置く）
  document.documentElement.dataset.bsTheme =
    matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
</script>

data-bs-theme は <div class="card" data-bs-theme="dark"> のように要素単位でも指定でき、その中だけダーク配色になります。

よく使うクラス一覧

レイアウト・グリッド

ブレークポイント

余白・表示・配置

文字・色

.bg-body-tertiary や .text-body-secondary のような body 系・subtle 系の色は、ダークモードで自動的に切り替わります。 .bg-light .text-dark は固定色なので、ダークモード対応のページでは body 系を使うと配色が揃います。

v4→v5 の置き換え表

Bootstrap 4 から移行するときは、左右の名前（left/right → start/end）とデータ属性（data- → data-bs-）の変更が中心です。

Sassでのカスタマイズ（色・角丸を変える）

ブランドの色や角丸を全体に反映したいときは、Sass で変数を上書きしてから Bootstrap を読み込みます。 CSS変数 --bs-primary を上書きするだけでは、.btn-primary のホバー色など Sass で計算済みの部分は変わらないためです。

npm i bootstrap@5.3.8
npm i -D sass

// scss/custom.scss
// 1. 変数を上書き（Bootstrapの読み込みより前に書く）
$primary: #6f42c1;
$border-radius: .75rem;
$enable-shadows: true;

// 2. Bootstrap本体を読み込む
@import "bootstrap/scss/bootstrap";

npx sass --style=compressed --no-source-map --load-path=node_modules --quiet-deps --silence-deprecation=import scss/custom.scss dist/custom.css

Dart Sass 1.105.1 で実行すると警告なしで完了し、出力CSSには --bs-primary: #6f42c1 と --bs-border-radius: 0.75rem が含まれていました（圧縮後 約235KB、配布版 bootstrap.min.css は約232KB）。

Bootstrap 5.3 の Sass は @import で書かれているため、オプションなしでは非推奨警告が大量に出ます。 検証では @import・グローバル関数・if() などの警告が表示され、最後に「313 repetitive deprecation warnings omitted.」と出ました。次の2点で抑えられます。

../node_modules/bootstrap/... のように相対パスで読み込むと依存パッケージ扱いにならず、--quiet-deps を付けても警告が残りました。読み込みパスを --load-path 経由にするのがポイントです。 Sass の書き方そのもの（@use や mixin）は Sass(SCSS) の解説記事で詳しく扱っています。

よく上書きする変数

TailwindとBootstrapの使い分け

完成した部品をすぐ使いたいなら Bootstrap、デザインを一から作り込みたいなら Tailwind CSS が向いています。 Tailwind の導入方法は別記事で扱っているため、ここでは選び方だけを表にします。

よくある質問

Q. Bootstrap 5.3 のCDNは最新版に自動で追従しますか？ A. いいえ。URL に @5.3.8 のようにバージョンを固定して書きます。 integrity もバージョンごとに異なるため、上げるときは公式の値で URL とセットで差し替えます。

Q. modal が開かない・ドロップダウンが動きません。 A. 多くは次のどれかです。①JS（bootstrap.bundle.min.js）を読み込んでいない ②v4 の書き方 data-toggle のまま（v5 は data-bs-toggle） ③data-bs-target と id が一致していない。 ブラウザの開発者ツールのコンソールでエラーも確認します。

Q. CSSだけ使ってJSを読み込まなくても大丈夫ですか？ A. グリッド・ボタン・カード・ユーティリティはCSSだけで動きます。 navbar の開閉、modal、toast、ドロップダウンなど動きのある部品にはJSが必要です。

まとめ

• 最新版は Bootstrap 5.3.8。CDN は CSS と JS（bundle）の2行で、URL と integrity は公式の値をセットで使う
• 雛形1枚で navbar・グリッド・card・form・modal・toast・footer が動く。toast は JS の show() が必要
• Playwright で、768px で2列・992px で3列とハンバーガー非表示を確認。modal は Esc・×・ボタンで閉じ、hidden.bs.modal が発火
• ダークモードは data-bs-theme。OS への自動追従はないので、合わせるなら短いスクリプトを追加
• v4 からの移行は data-bs-* と start/end の置き換えが中心
• 色や角丸の変更は Sass 変数の上書き。警告は --load-path ＋ --quiet-deps で抑えられる
• 部品をすぐ使うなら Bootstrap、独自デザインなら Tailwind と使い分ける

株式会社RJCでは、Bootstrap を使った画面づくりを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。