Bootstrap入門 - 10年以上愛され続けるCSSフレームワークの決定版

はじめに

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の核となる機能です。コンテナ、行、カラムの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>