Bootstrapとは？
特徴・種類・使い方を
初心者向けにわかりやすく解説
「CSSを書かずにレスポンシブなWebサイトを作る」——それを可能にしたのがBootstrapだ。2010年にTwitterが開発し、世界中のWeb開発現場で使われ続けるCSSフレームワークの全貌を解説する。競合記事が書いていない「Tailwind CSSとの使い分け」「Bootstrap 5の新機能詳細」「ダークモードの実装」「よくあるアンチパターン」まで完全収録。
1. Bootstrapとは——誕生の背景から理解する
Bootstrap（ブートストラップ）は、HTML・CSS・JavaScriptで構成されたオープンソースのCSSフレームワークだ。ボタン・ナビゲーションバー・フォーム・テーブルなどのUIコンポーネントがあらかじめ用意されており、クラス名をHTMLタグに追加するだけでデザインが完成する。
2010年、TwitterのエンジニアであるMark OttoとJacob Thorntonが、Twitterの社内ツールの開発効率を上げるために作った。バラバラだったフロントエンドのコードを統一するために生まれた——これがBootstrapの原点だ。2011年にGitHubでオープンソース化され、現在は独立したコミュニティベースで開発・メンテナンスが続けられている。
現行バージョンはBootstrap 5（最新マイナーは2025年8月リリースのv5.3.8）。2026年3月時点では次期メジャーバージョンBootstrap 6の開発も始まっているが、現時点では5系を学んでおけば問題ない。
- Bootstrap 5でjQueryが不要になった理由と4との具体的な違い
- Tailwind CSS vs Bootstrap——2026年の現場でどちらを選ぶかの判断フロー
- コンテナの3種類（container / container-fluid / container-{breakpoint}）の使い分け
- ダークモードの実装方法——Bootstrap 5.3の新機能。data-bs-theme属性だけで切り替わる
- スペーシングユーティリティ（m-・p-）の完全解説
- よくあるアンチパターン——「!important地獄」「不要なBootstrap依存」など
- Bootstrap Icons 1,800種以上の活用方法
- npmでのインストール方法（CDNだけでない導入手順）
2. Bootstrap 5の主要な新機能——4との決定的な違い
Bootstrap 4から5への移行は「バージョンアップ」というより「設計思想の転換」に近い。古い記事や教材のコードが動かないのは、この違いを知らないからであることが多い。
| 変更点 | Bootstrap 4 | Bootstrap 5（現行） |
|---|---|---|
| jQueryへの依存 | 必要（依存あり） | 不要（Vanilla JSに移行） |
| RTL（右→左言語）対応 | 非対応 | 標準対応 |
| CSS カスタムプロパティ | 一部 | 大幅に拡充 |
| ダークモード | 非対応 | 5.3以降で標準対応（data-bs-theme） |
| グリッドの列数 | 12列固定 | 12列固定＋CSSグリッドオプション追加 |
| フォームのスタイル | 旧スタイル | 全面リデザイン。より一貫性が高い |
| インラインフォーム | form-inline（廃止済み） | row row-cols-lg-auto に変更 |
| ドロップダウン | Popper 1.x | Popper 2.xに移行 |
| XXLグリッドサイズ | なし | xxl（1400px以上）が追加 |
| カラーパレット | 旧パレット | 拡充されたカラーパレット＋テキスト・背景・ボーダーの対応色追加 |
3. Bootstrapの特徴3つ
レスポンシブWebデザインが標準搭載
Bootstrap最大の特徴。「モバイルファースト」の設計思想に基づいており、グリッドシステムを使うとPCでもスマートフォンでもタブレットでも崩れないレイアウトが実現できる。通常はデバイスごとに複数のCSSファイルを書くか複雑なmedia queryを書く必要があるが、Bootstrapならクラス名を追加するだけで自動的にレイアウトが切り替わる。
実用的なUIコンポーネントが揃っている
ボタン・フォーム・ナビゲーションバー・テーブル・モーダル・カード・アコーディオン・ドロップダウン・バッジ・プログレスバーなど、Webサイトでよく使うUI部品が一通り揃っている。デザイン知識がなくても、クラス名を追加するだけで一定以上の見栄えを確保できる。
チーム開発でコードが統一される
同じクラス名ルールを使うため、チームメンバー全員が同じ書き方でコーディングできる。レビューがしやすく、新規メンバーが参加してもすぐにキャッチアップできる。チーム開発でBootstrapを使う最大のメリットはコードスタイルの統一で、デザインの「ちぐはぐ感」が出にくくなる。
開発スピードが大幅に上がる
ゼロからCSSを書く場合に比べ、開発スピードが大幅に向上する。管理画面・コーポレートサイト・LP・プロトタイプなど「デザインの独自性よりスピードを優先する場面」で特に効果を発揮する。BootstrapなしのチームがBootstrapを導入すると、UI実装の時間が30〜50%削減されることも。
4. Bootstrapの種類
| 種類 | 概要 | 現在の状況 | 初心者の優先度 |
|---|---|---|---|
| Bootstrap本体 | 一般に「Bootstrap」といえばこれ。元はTwitterが開発したことから「Twitter Bootstrap」とも呼ばれたが現在は独立したOSS | 最新はv5.3.8。活発にメンテナンス中 | 最初に学ぶべきはこれだけ |
| Bootstrapテーマ・テンプレート | デザイン済みのテンプレートを適用する仕組み。bootswatchやStart Bootstrapで無料テーマを入手できる。かつての公式マーケットプレイスは2025年に閉鎖 | bootswatchが引き続き人気 | 本体を理解してから |
| ng-bootstrap | JavaScriptフレームワーク「Angular」と組み合わせて使うライブラリ。AngularJSは2022年1月にサポート終了しており、現在は「ng-bootstrap」（Angular 2以降対応版）が主流 | Angularユーザー向け | Angularを使う場合のみ |
| WordPress向けBootstrapテーマ | WordPressと組み合わせるBootstrapテーマ。かつての「BootstrapWP」はほぼ更新停止。Bootstrap 5対応の「UnderStrap」などのスターターテーマが代替として人気 | UnderStrapが推奨 | WP制作をする場合のみ |
5. Bootstrap vs Tailwind CSS——2026年の使い分け判断
「BootstrapとTailwind CSSはどちらを学べばいい？」——これは2026年のフロントエンド学習で最もよく聞かれる質問だ。多くの競合記事がこれを書いていないが、実務での判断基準を知っておくことは重要だ。
コンポーネント型
- デザイン済みコンポーネントをそのまま使える
- 「ボタン」「カード」「ナビバー」を素早く配置
- HTMLのクラス名だけで完結する
- CSSをほぼ書かずにサイトが完成
- バンドルサイズが大きめ（未使用CSSが含まれる）
- デフォルトのデザインに縛られる
ユーティリティファースト型
- 低レベルのCSSクラスを組み合わせてデザインする
- 「flex」「gap-4」「bg-blue-500」などを直接記述
- 完全にオリジナルなデザインが作れる
- PurgeCSSで使用クラスのみを出力できる
- HTMLが長くなりやすい
- デザインの判断をすべて自分でする必要がある
| 場面・状況 | 推奨 | 理由 |
|---|---|---|
| 初心者がWeb開発を学び始める | Bootstrap | HTML・CSS基礎を学びながらデザインも完成する。成功体験を得やすい |
| 管理画面・社内ツールを素早く作る | Bootstrap | デザインの独自性より開発スピードを優先する場面に最適 |
| オリジナルデザインのサービスを作る | Tailwind CSS | Bootstrapのデフォルトデザインの「制限」を受けずに自由に設計できる |
| Next.js / Nuxt.js 等のモダンフレームワーク | Tailwind CSS | コンポーネント指向開発と相性が良い。shadcn/ui等のエコシステムが充実 |
| チームのCSSスキルにばらつきがある | Bootstrap | 同じクラス名ルールで統一されるため、コードレビューが楽 |
| デザイナーが作ったPixel完璧なデザインを実装 | Tailwind CSS | Bootstrapの既定スタイルを上書きするより自由度が高い |
| WordPressサイト制作 | Bootstrap | Bootstrap対応テーマが豊富で実績も多い |
6. メリット・デメリット
- Googleアカウントだけで無料・即日利用可能
- CSSをほぼ書かずにレスポンシブデザインが完成
- コンポーネントが豊富で開発スピードが大幅向上
- チーム開発でのコードスタイル統一
- MDN・Stack Overflow等で膨大な参考情報
- jQueryなしでBootstrap 5は動く
- ダークモードが属性1つで対応（5.3以降）
- MITライセンスで商用利用無料
- デフォルトデザインの「Bootstrap感」が出やすい
- バンドルサイズが大きい（未使用のCSSが含まれる）
- ピクセル単位の細かいカスタマイズに手間がかかる
- モダンなReact/Next.jsプロジェクトとの相性がやや悪い
- !importantを多用するとCSSの優先度地獄に陥りやすい
- Bootstrap 4→5の移行でコードの書き直しが必要になる
7. セットアップ方法（CDN・ダウンロード・npm）
Bootstrapの導入方法は3種類ある。初心者はCDN経由が最も手軽だ。
方法①：CDN経由（初心者推奨・最も手軽）
ファイルのダウンロード不要。HTMLにコードを数行追加するだけで完了する。
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css”
rel=“stylesheet”
integrity=“sha384-64UC4BEhTGwk3eGpak…”
crossorigin=“anonymous”>
<!– bodyタグ閉じる直前にJSを読み込む –>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js”
integrity=“sha384-jdSIJTK9l6Xwxj3…”
crossorigin=“anonymous”></script>
方法②：公式サイトからダウンロード
インターネット接続がない環境や、ファイルを手元に管理したい場合に使う。getbootstrap.comから「Compiled CSS and JS」をダウンロードして解凍し、HTMLから相対パスで読み込む。
<link href=“css/bootstrap.min.css” rel=“stylesheet”>
<script src=“js/bootstrap.bundle.min.js”></script>
方法③：npmでインストール（Node.js環境）
ReactやVueなどのモダンなフレームワークと組み合わせる場合、またはWebpackやViteでビルドする場合に使う方法。未使用のCSSをPurge（削除）できるためファイルサイズを最小化できる。
npm install bootstrap
# yarnの場合
yarn add bootstrap
# JavaScriptファイルでインポート（例：main.js）
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap’
最小限のHTMLテンプレート（スターター）
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css” rel=“stylesheet”>
<title>Bootstrap 5 スターター</title>
</head>
<body>
<div class=“container”>
<h1>Hello, Bootstrap 5!</h1>
</div>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
8. グリッドシステム——レスポンシブの核心
Bootstrapのグリッドシステムは「横幅を12列に分割して、各要素に何列分の幅を使うかをクラス名で指定する」仕組みだ。これがレスポンシブデザインの核心になる。
グリッドの基本ルール
<div class=“container”>
<!– ②rowで行を作る –>
<div class=“row”>
<!– ③col-{ブレークポイント}-{列数}で幅を指定 (合計12になるように) –>
<div class=“col-md-4”>左（4列分）</div>
<div class=“col-md-8”>右（8列分）</div>
</div>
</div>
ブレークポイント一覧
| クラス接頭辞 | 画面幅 | 対象デバイス | 使用例 |
|---|---|---|---|
| col-（なし） | 576px未満（全画面） | スマートフォン（縦） | col-12（常に全幅） |
| col-sm- | 576px以上 | スマートフォン（横） | col-sm-6（2列並び） |
| col-md- | 768px以上 | タブレット | col-md-4（3列並び） |
| col-lg- | 992px以上 | デスクトップ | col-lg-3（4列並び） |
| col-xl- | 1200px以上 | 大型デスクトップ | col-xl-2（6列並び） |
| col-xxl- | 1400px以上（Bootstrap 5新機能） | 超大型ディスプレイ | col-xxl-1（12列並び） |
実用的なグリッドの例（スマホ1列→タブレット2列→PC3列）
<div class=“row g-3”> <!– g-3はガター（列間の余白） –>
<div class=“col-12 col-md-6 col-lg-4”>カード①</div>
<div class=“col-12 col-md-6 col-lg-4”>カード②</div>
<div class=“col-12 col-md-6 col-lg-4”>カード③</div>
</div>
</div>
<!–
スマホ: 3枚を縦1列表示（col-12）
タブレット: 2列表示（col-md-6 = 12÷2）
PC: 3列表示（col-lg-4 = 12÷3）
–>
9. コンテナの種類と使い分け
多くの入門記事が「containerを使う」とだけ書いているが、実は3種類のコンテナがある。使い分けを知るとレイアウトの幅が広がる。
| クラス名 | 動作 | 最大幅 | 向いている場面 |
|---|---|---|---|
| container | 画面サイズに応じてステップ的に最大幅が変化する。左右に自動的に余白ができる | ブレークポイントごとに異なる（最大1320px） | 一般的なコンテンツ領域。ブログ記事・LPのメインコンテンツ |
| container-fluid | 常に親要素の100%幅になる。余白なし | 100%（画面端まで） | 全幅ヒーローエリア・ナビゲーションバー・フッター |
| container-{sm/md/lg/xl/xxl} | 指定したブレークポイント以下では100%幅、それ以上では固定幅になる | 指定サイズに応じて異なる | 特定のデバイス幅から余白を入れたい場合 |
<nav class=“navbar bg-dark container-fluid”>…</nav>
<!– メインコンテンツは中央寄せ・最大幅あり –>
<main class=“container py-5”>…</main>
<!– フッターは全幅 –>
<footer class=“container-fluid bg-dark text-white py-4”>…</footer>
10. スペーシングユーティリティ（m・p）——余白調整の完全解説
Bootstrapの余白調整は「m（margin）」と「p（padding）」のクラスで行う。これを覚えるだけでレイアウト調整がコードなしでできるようになる。
クラス名の構造
プロパティ：
- m — margin（外側の余白）
- p — padding（内側の余白）
方向（省略すると上下左右すべてに適用）：
- t — top（上）/ b — bottom（下）/ s — start=left（左）/ e — end=right（右）
- x — 左右両方 / y — 上下両方
サイズ（0〜5 + auto）：
- 0 — 0px / 1 — 4px / 2 — 8px / 3 — 16px / 4 — 24px / 5 — 48px / auto — 自動
<div class=“mt-3”>上に16pxの余白</div>
<div class=“mb-5”>下に48pxの余白</div>
<div class=“px-4”>左右に24pxのpadding</div>
<div class=“py-3”>上下に16pxのpadding</div>
<div class=“mx-auto”>左右のmarginをautoで中央揃え</div>
<div class=“m-0”>margin全方向を0に</div>
11. コンポーネント——よく使うものと実例コード
- コンテナ（container・container-fluid）
- グリッドシステム（col-）
- スタック（vstack・hstack）
- フロート（float-end等）
- ナビゲーションバー（navbar）
- ナビ・タブ（nav・nav-tabs）
- パンくずリスト（breadcrumb）
- ページネーション（pagination）
- 入力フォーム（form-control）
- セレクトボックス（form-select）
- チェックボックス（form-check）
- バリデーションスタイル
- モーダル（modal）
- ドロップダウン（dropdown）
- アコーディオン（accordion）
- トースト（toast）
- ボタン（btn・btn-primary等）
- カード（card）
- バッジ（badge）
- プログレスバー（progress）
- テーブル（table・table-striped）
- アラート（alert）
- カルーセル（carousel）
- スピナー（spinner）
ボタン——最もよく使うコンポーネント
<button class=“btn btn-primary”>Primary</button>
<button class=“btn btn-secondary”>Secondary</button>
<button class=“btn btn-success”>Success</button>
<button class=“btn btn-danger”>Danger</button>
<button class=“btn btn-warning”>Warning</button>
<!– サイズ指定 –>
<button class=“btn btn-primary btn-lg”>大きいボタン</button>
<button class=“btn btn-primary btn-sm”>小さいボタン</button>
<!– アウトラインボタン（背景なし・枠線のみ） –>
<button class=“btn btn-outline-primary”>Outline</button>
カード——コンテンツを整理するのに便利
<img src=“…” 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>
ナビゲーションバー
<div class=“container”>
<a class=“navbar-brand” href=“#”>ロゴ</a>
<!– モバイル用ハンバーガーボタン –>
<button class=“navbar-toggler” type=“button” data-bs-toggle=“collapse” data-bs-target=“#navMenu”>
<span class=“navbar-toggler-icon”></span>
</button>
<div class=“collapse navbar-collapse” id=“navMenu”>
<ul class=“navbar-nav ms-auto”>
<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>
12. ダークモードの実装（Bootstrap 5.3以降）
Bootstrap 5.3で追加されたカラーモード（Color Mode）機能により、data-bs-theme属性を追加するだけでダークモード対応ができる。これは競合記事のほとんどが触れていない重要な新機能だ。
<html lang=“ja” data-bs-theme=“dark”>
<!– 特定の要素だけダークモードにする –>
<div class=“card” data-bs-theme=“dark”>
<div class=“card-body”>このカードだけダーク</div>
</div>
<!– JavaScriptでダーク/ライトを切り替えるボタン –>
<button id=“themeToggle” class=“btn btn-outline-secondary”>🌙 ダークモード切替</button>
<script>
const btn = document.getElementById(‘themeToggle’);
btn.addEventListener(‘click’, () => {
const html = document.documentElement;
html.setAttribute(‘data-bs-theme’,
html.getAttribute(‘data-bs-theme’) === ‘dark’ ? ‘light’ : ‘dark’);
});
</script>
13. Bootstrap Iconsの使い方
Bootstrap Iconsは1,800種類以上のアイコンが無料・商用利用可のSVGアイコンセット。Bootstrap本体とは独立したパッケージなので、Bootstrapを使っていないプロジェクトでも利用できる。
<link rel=“stylesheet”
href=“https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css”>
<!– ②使いたいアイコンのクラス名をiタグに追加 –>
<i class=“bi bi-house”></i> <!– 家アイコン –>
<i class=“bi bi-person”></i> <!– 人物アイコン –>
<i class=“bi bi-search”></i> <!– 検索アイコン –>
<i class=“bi bi-heart-fill”></i> <!– ハート（塗りつぶし）アイコン –>
<i class=“bi bi-trophy-fill”></i> <!– トロフィーアイコン –>
<!– サイズはfont-sizeで変更 –>
<i class=“bi bi-star” style=“font-size: 2rem;”></i>
<!– ボタンにアイコンを組み合わせる –>
<button class=“btn btn-primary”>
<i class=“bi bi-download me-2”></i>ダウンロード
</button>
使いたいアイコン名はBootstrap Icons公式サイト（icons.getbootstrap.com）で検索できる。アイコン名に「-fill」をつけると塗りつぶし版になる。
14. よくあるアンチパターンと正しい使い方
Bootstrapを使い始めたばかりの初心者が陥りやすいミスを整理する。これを知っておくだけでコードの品質が大きく上がる。
| # | アンチパターン | 何が問題か | 正しい書き方 |
|---|---|---|---|
| 1 | Bootstrapのスタイルを!importantで上書きする |
どこで何が上書きされているか分からなくなる「!important地獄」に陥る。後からの修正が困難になる | CSSカスタムプロパティ（変数）で上書きするか、より具体性の高いセレクターで上書きする |
| 2 | Bootstrap 4の記事のコードをコピーして使う | jQueryが必要・廃止されたクラス（form-inline等）が含まれるため動かないことがある | 必ず使用しているBootstrapのバージョンの公式ドキュメントを参照する |
| 3 | rowの中に直接コンテンツを置く | グリッドのガター（余白）が適用されず、レイアウトが崩れる | rowの中には必ずcol-*を置く。コンテンツはcol-*の中に入れる |
| 4 | containerを入れ子にする | 余白が二重になりレイアウトが意図しない幅になる | containerは1ページに1つが基本。入れ子にしない |
| 5 | オリジナルデザインなのに無理にBootstrapで実装する | Bootstrapのデフォルトスタイルとの戦いになり、書くCSSが増えてメリットが消える | オリジナルデザインはTailwind CSSや素のCSSで書く方が効率的 |
| 6 | インラインスタイルとBootstrapクラスを混在させる | どこにスタイルが定義されているか分からなくなる。チーム開発でトラブルのもと | できる限りBootstrapのユーティリティクラスを使い、インラインは最小限に |
