Bootstrap — Twitter発、世界で最も普及したCSSフレームワーク

2026年6月3日

Bootstrap（ブートストラップ）はTwitter社（現X）が2011年に公開した、HTML／CSS／JavaScriptを組み合わせたフロントエンドフレームワークです。グリッドシステム、ボタン、ナビゲーションバー、モーダル、フォーム部品などを統一的に提供し、「Bootstrapを読み込めばそれっぽいレスポンシブWebサイトがすぐ作れる」状態を世界中の開発者にもたらしました。GitHubで長くスター数1位を維持した時期があるほどの普及度を誇り、WordPressテーマ、社内システム、教育機関のサイトなど、いまだに膨大な現場で稼働しているCSSの巨頭です。

この記事の目次

12カラムグリッドと部品群
Twitter発、OSSへ
今でも残る典型用途
Tailwind・MUIとの違い
まとめ

12カラムグリッドと部品群

Bootstrapの中核は12カラムのレスポンシブグリッドシステムです。container／row／col のクラスを組み合わせるだけで、PCでは4カラム、タブレットでは2カラム、スマホでは1カラムに自動で並び替わるレイアウトが書けます。ブレークポイントはsm／md／lg／xl／xxlと標準化されており、メディアクエリを直接書かなくても多くのレスポンシブ要件をカバーできます。この「クラスを足すだけで見た目が整う」体験こそが、Bootstrapが世界中で普及した最大の理由です。

コンポーネント層には、ボタン、フォーム、テーブル、ナビゲーションバー、モーダル、トースト、カルーセル、アコーディオンなど、Web制作で頻出する部品が一通り揃っています。v4以降はUtilitiesクラスも充実し、d-flex、p-3、text-center、bg-primaryなど、TailwindライクなユーティリティクラスでHTMLだけで多くの調整が行えるようになりました。Sass変数を上書きすればテーマカスタマイズも可能で、ブランドカラーや角丸の度合いなどを一括で変更できます。

Twitter発、OSSへ

Bootstrapは2011年8月、Twitterのエンジニア、Mark Otto氏とJacob Thornton氏が社内ツールのデザイン統一のために作ったTwitter Blueprintを起源とし、後に「Twitter Bootstrap」として公開されました。オープンソース化されると瞬く間に世界中の開発者に採用され、Stack OverflowからWordPressテーマ業界まで、あらゆるWeb制作の現場で標準スタックの一部となりました。

その後Twitter本体から独立したBootstrapチームが開発を継続し、v3でモバイルファースト設計を採用、v4ではFlexboxベースのグリッドへ全面刷新、v5ではjQuery依存を撤廃して純粋なJavaScriptへ移行という大改装を経ています。ピーク時にはGitHubのスター数で世界1位を長く保持し、CDN経由でのbootstrap.cssの月間ダウンロードは桁外れの数を記録しました。現在もエンタープライズ系・教育系・WordPressテーマなど膨大な現場で稼働し続けており、Webの歴史を語る上で外せない存在です。

今でも残る典型用途

Bootstrapが今もよく使われるのは、「Reactなどフロント主導のSPAではないWeb制作」です。WordPressやDrupalなどCMSベースのコーポレートサイト、ASP.NET／Laravel／Railsのサーバサイドレンダリング型アプリ、社内向けの管理画面プロトタイプなど、「サーバ側でHTMLを返し、見た目の整合性をクラスベースで担保したい」用途に最適です。JSフレームワークを使わずとも、データバインディングなしの素のHTMLでそれっぽく整うのが強みです。

教育機関や自治体のサイト、地方の中小企業のコーポレートサイト、医療機関のWebサイトなど、「最先端を追う必要はないが、レスポンシブ対応はしたい」現場でも依然として現役です。Bootstrap製のテンプレートを販売するThemeforestには数千点のテーマが並び、Web制作受注を行うフリーランスや小規模制作会社にとっては、今も主要なツールセットの1つであり続けています。

Tailwind・MUIとの違い

Tailwind CSSと比べると、Bootstrapは「完成された部品とテーマを与える」アプローチに対し、Tailwindは「ユーティリティクラスを組み合わせて自由にデザインする」アプローチです。Bootstrapはすぐに「Bootstrap風の見た目」が立ち上がる反面、独自感を出すにはSass変数のカスタマイズが必要で、Tailwindは最初から自由ですが、見た目の方向性を自分で定義する手間がかかります。

MUIと比べた場合、BootstrapはReact前提ではなく、純粋なHTML／CSS／JS基盤として使えるのが最大の違いです。サーバサイドレンダリング中心のサイトや、CMSベースのWeb制作ではBootstrapが圧倒的に扱いやすく、ReactのSPAで業務系UIを作るならMUIが向く、という棲み分けになっています。Webの歴史を変えた「最初のCSSフレームワーク」として、2010年代以降のWeb制作スタックを語る上で外せない、不朽の存在です。