Bootstrapを今あらためて使ってみたら、やっぱり強かった話

はじめに

Bootstrapって、Web開発を始めた頃に一度は触ったことがあるんじゃないでしょうか。

正直なところ、最近はTailwind CSSが注目されがちで「Bootstrapはもう古い」という声を聞くこともあります。でも実際のところ、GitHub Stars 174k、フォーク数79.2kという数字を見れば、いまだに世界で最も使われているCSSフレームワークだということがわかります。10年以上の歴史があり、ドキュメントも充実していて、初心者からベテランまで幅広く使われているんですよ。

この記事では、Bootstrap 5.3の特徴からインストール方法、実践的な使い方まで解説していきます。

とはいえ、読むより触った方が早いと思います。ボタンやアラート、モーダル、カードレイアウトをその場で動かせるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Bootstrapとは

Bootstrapは、Twitter社（現X社）のエンジニアが開発したCSSフレームワークです。

「スリークで直感的、パワフルなフロントエンドフレームワーク」というコンセプトで、レスポンシブでモバイルファーストなWebサイトを素早く構築できます。グリッドシステム、豊富なコンポーネント、JavaScriptプラグインが揃っていて、これ一つでほとんどのUIパターンに対応できます。

<!-- Bootstrapのボタン例 -->
<button class="btn btn-primary">プライマリボタン</button>
<button class="btn btn-secondary">セカンダリボタン</button>
<button class="btn btn-outline-danger">アウトラインボタン</button>

コンポーネントベースのアプローチなので、クラス名を覚えれば即座に使えるのが特徴ですね。

特徴・メリット

1. 学習コストが低い

個人的に一番のメリットはこれ。ドキュメントが非常に充実していて、日本語の情報も豊富です。30代になって新しい技術を学ぶ時間が限られている身としては、すぐに使い始められるのは本当にありがたい。

2. 豊富なコンポーネント

ボタン、カード、モーダル、ナビゲーション、フォームなど、Webサイトで必要になるUIコンポーネントがほぼ揃っています。ゼロから作る必要がないので、プロトタイプの作成が爆速になります。

3. レスポンシブグリッドシステム

12カラムのグリッドシステムが強力で、レスポンシブデザインが簡単に実現できます。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">カラム1</div>
    <div class="col-12 col-md-6 col-lg-4">カラム2</div>
    <div class="col-12 col-md-12 col-lg-4">カラム3</div>
  </div>
</div>

4. jQueryなしで動作（v5以降）

Bootstrap 5からjQuery依存がなくなりました。これ、意外と大きい変更なんですよ。モダンなJavaScript環境でもすんなり導入できます。

5. Sassでカスタマイズ可能

デフォルトのデザインをそのまま使うと「Bootstrapっぽさ」が出てしまいますが、Sass変数をオーバーライドすることで独自のデザインにカスタマイズできます。

// 変数のオーバーライド
$primary: #900;
$enable-shadows: true;

// Bootstrapをインポート
@import "../node_modules/bootstrap/scss/bootstrap";

6. RTLサポート

Bootstrap 5からは右から左に読む言語（アラビア語、ヘブライ語など）のサポートが標準で入っています。グローバル展開を考えている場合は嬉しいポイント。

インストール方法

2026年1月現在の最新バージョンはv5.3.8です。いくつかの方法でインストールできます。

npm

npm install bootstrap@5.3.8

JavaScriptも使う場合はPopperも必要です:

npm install bootstrap @popperjs/core

CDN

とりあえず試したい場合はCDNでサクッと導入できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-primary">Hello Bootstrap!</h1>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

bootstrap.bundle.min.jsにはPopperが含まれているので、別途インストールする必要はありません。

yarn / Bun

# yarn
yarn add bootstrap

# Bun
bun add bootstrap

Bootstrapのサンプルを動かす

Bootstrapはbtn btn-primaryのようなクラス名を付けるだけで見た目が決まるので、CSSを1行も書かずにUIを組み立てられます。さらにアラート（alert）やモーダルなどのコンポーネントは、bootstrap.bundle.min.jsを読み込むだけでdata-bs-*属性からJavaScriptの動作まで面倒を見てくれます。以下のサンプルでは、ボタンを押すたびにbtnのクラス（btn-primary / btn-outline-danger）とalertのクラス（alert-info / alert-warning）を切り替えていて、Bootstrapのコンポーネントがクラス操作だけでどう変化するかを確認できます。

要点だけを抜き出すと、次のようにボタンのクラスを書き換えて、閉じるボタン付きのアラート（alert-dismissible）をJavaScriptで差し込んでいます。

<button id="toggleBtn" class="btn btn-primary">切り替え</button>
<div id="alertArea"></div>

<script>
  toggleBtn.addEventListener('click', () => {
    toggleBtn.className = isPrimary ? 'btn btn-outline-danger' : 'btn btn-primary'
    alertArea.innerHTML = `
      <div class="alert alert-warning alert-dismissible fade show">
        スタイルを切り替えました
        <button class="btn-close" data-bs-dismiss="alert"></button>
      </div>`
  })
</script>

実際に動かせるサンプルが以下です。ボタンを押すとbtnのクラスとalertのクラスがその場で変わり、アラート右側の閉じるボタン（btn-close + data-bs-dismiss="alert"）でアラート自体を消すこともできます。

ボタンを押すたびにbtn-primaryとbtn-outline-dangerが入れ替わり、同時にalert-infoとalert-warningのアラートが表示されることが確認できたと思います。クラス名をbtn-successやalert-dangerに書き換えれば、それだけで色味の異なるコンポーネントが得られます。JavaScriptを自分で書いたのはクラスの切り替えとアラートの挿入だけで、アラートを閉じる動作自体はbootstrap.bundle.min.jsが担っている点もポイントです。

基本的な使い方

グリッドシステム

Bootstrapの核となる機能です。コンテナ、行、カラムの3層構造でレイアウトを組みます。

<div class="container">
  <div class="row">
    <div class="col-sm-4">1/3幅</div>
    <div class="col-sm-4">1/3幅</div>
    <div class="col-sm-4">1/3幅</div>
  </div>
</div>

ブレークポイントは以下の通り:

col-: 常に適用
col-sm-: 576px以上
col-md-: 768px以上
col-lg-: 992px以上
col-xl-: 1200px以上
col-xxl-: 1400px以上

ボタン

<!-- サイズ -->
<button class="btn btn-primary btn-lg">大きいボタン</button>
<button class="btn btn-primary">通常ボタン</button>
<button class="btn btn-primary btn-sm">小さいボタン</button>

<!-- バリエーション -->
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危険</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">情報</button>

<!-- アウトライン -->
<button class="btn btn-outline-primary">アウトライン</button>

カード

<div class="card" style="width: 18rem;">
  <img src="/image.jpg" class="card-img-top" alt="画像">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードの説明文がここに入ります。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ロゴ</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">サービス</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

モーダル

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        モーダルの内容がここに入ります。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

実践的なユースケース

ログインフォーム

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
      <div class="card shadow">
        <div class="card-body p-4">
          <h3 class="card-title text-center mb-4">ログイン</h3>
          <form>
            <div class="mb-3">
              <label for="email" class="form-label">メールアドレス</label>
              <input type="email" class="form-control" id="email" placeholder="example@email.com">
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">パスワード</label>
              <input type="password" class="form-control" id="password">
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="remember">
              <label class="form-check-label" for="remember">ログイン状態を保持</label>
            </div>
            <button type="submit" class="btn btn-primary w-100">ログイン</button>
          </form>
          <hr>
          <p class="text-center text-muted mb-0">
            アカウントをお持ちでない方は<a href="#">新規登録</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

料金表

<div class="container py-5">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100 text-center">
        <div class="card-header">
          <h4 class="my-0">フリー</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">¥0<small class="text-muted">/月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>基本機能</li>
            <li>5GBストレージ</li>
            <li>メールサポート</li>
          </ul>
          <button class="btn btn-outline-primary w-100">無料で始める</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center border-primary">
        <div class="card-header bg-primary text-white">
          <h4 class="my-0">プロ</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">¥980<small class="text-muted">/月</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>全機能</li>
            <li>100GBストレージ</li>
            <li>優先サポート</li>
          </ul>
          <button class="btn btn-primary w-100">プランを選択</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center">
        <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>カスタム機能</li>
            <li>無制限ストレージ</li>
            <li>専任サポート</li>
          </ul>
          <button class="btn btn-outline-primary w-100">お問い合わせ</button>
        </div>
      </div>
    </div>
  </div>
</div>

アラート・通知

<!-- 基本的なアラート -->
<div class="alert alert-success" role="alert">
  保存が完了しました。
</div>

<!-- 閉じるボタン付き -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  セッションがまもなく期限切れになります。
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- アイコン付き -->
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24">...</svg>
  <div>エラーが発生しました。もう一度お試しください。</div>
</div>

Bootstrapのモーダルでフォーム入力を反映する

Bootstrapのモーダル（modal）はdata-bs-toggle="modal"とdata-bs-targetをボタンに付けるだけで開閉できるコンポーネントです。さらにshow.bs.modalのようなイベントを使うと、モーダルが開く直前にJavaScriptで内容を差し替えることもできます。以下は、入力欄のテキストをモーダル本文に反映させるサンプルです。

要点は次の通りです。ボタンにdata-bs-targetでモーダルのidを指定し、show.bs.modalイベントで本文を書き換えています。

<button data-bs-toggle="modal" data-bs-target="#demoModal" class="btn btn-primary">
  詳細を見る
</button>

<div class="modal fade" id="demoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body" id="modalBody"></div>
    </div>
  </div>
</div>

<script>
  demoModal.addEventListener('show.bs.modal', () => {
    modalBody.textContent = memo.value
  })
</script>

実際に触れるサンプルはこちらです。「モーダルに表示するメモ」の値を書き換えてから「詳細を見る」を押すと、最新の入力内容がモーダル本文に反映されます。

memo欄を空にしてからモーダルを開くと本文も空になり、逆に長い文章を入れればmodal-bodyにそのまま反映されます。実務では、一覧のカードやテーブルの行から「詳細を見る」で個別データをモーダルに渡す場合にこのshow.bs.modalイベントがよく使われます。

カード＋グリッドレイアウトで列数を切り替える

Bootstrapのグリッドシステム（row-cols-*）とカード（card）を組み合わせると、一覧表示の列数をクラス名の変更だけで調整できます。デザインをブレークポイントごとに作り込まなくても、row-cols-md-2をrow-cols-md-4に変えるだけでレイアウトが変わるのがポイントです。

要点は以下の通りです。row要素のクラスを丸ごと差し替えるだけで、中のカード（col + card）はそのままで列数が変わります。

<div id="cardRow" class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">Item 1</div>
    </div>
  </div>
  <!-- ... -->
</div>

<script>
  cardRow.className = `row row-cols-1 row-cols-md-${cols} g-3`
</script>

実際に触れるサンプルです。「2列」「3列」「4列」ボタンを押すと、同じ6枚のカードのままレイアウトの列数だけが切り替わります。

row-cols-md-2〜row-cols-md-4のクラスが切り替わるたびに、同じカードでも1行あたりの表示枚数が変わることが確認できます。画面幅ごとに列数を変えたい場合は、row-cols-md-*に加えてrow-cols-lg-*のように別のブレークポイント用クラスも併記するのが実務での定番パターンです。