はじめに
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>
まとめ
Bootstrapは、10年以上の実績がある信頼性の高いCSSフレームワークです。
個人的に特に気に入っているポイントをまとめると:
- ドキュメントが充実していてすぐに使い始められる
- コンポーネントが豊富でプロトタイプ作成が爆速
- グリッドシステムが強力でレスポンシブ対応が楽
- jQuery不要でモダンな開発環境にフィット
- Sassでカスタマイズすれば「Bootstrapっぽさ」を消せる
確かにTailwind CSSのようなユーティリティファーストのアプローチも魅力的ですが、コンポーネントベースで「とりあえず動くものを素早く作りたい」という場面ではBootstrapの方が向いていると思います。特に、デザイナーがいないプロジェクトや、管理画面・社内ツールの開発では今でも重宝します。
174kのGitHub Starsは伊達じゃないですね。まだ触ったことがない方も、久しぶりに使ってみようという方も、ぜひ最新のBootstrap 5を試してみてください。