Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークになる前に、BootstrapはTwitter Blueprintという名で知られていました。数か月の開発期間を経て、Twitter社は最初のHack Week（社内イベント）を開催し、あらゆる技術レベルの開発者が外部の指導を受けずに飛び込んだため、プロジェクトが急激に大きくなりました。公開前の1年以上の間、同社の社内ツール開発のスタイル・ガイドとして使用され、今日も続いています。

当初2011年8月19日(金)に公開され、その後v2とv3による2つの大きな書き換えを含む20回以上の更新をしてきました。Bootstrap2では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。

Bootstrapは当初米Twitter社から提供されていたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなった。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3の時点でhttp://twitter.github.com/bootstrap/からhttps://getbootstrap.comに移転した。

※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある（3.0、3.1、3.2を除く）。

名称について

プロジェクトとフレームワークは、常にBootstrapと呼ばれなければなりません。前にTwitterは不要で、大文字は省略形であるBのみでsは大文字ではありません。

ライセンスについて

Bootstrapは、MITライセンスの下で公開され、2011年の公開から現在まで、著作権はTwitter社が有している。

更新履歴

• PST 2013/7/27にBootstrap v3RC1が公開された。
• PST 2013/8/13にBootstrap v3RC2が公開された。
• PST 2013/8/19にv3.0.0正式版が公開された。
• PST 2013/10/29にv3.0.1が公開された。
• PST 2013/11/6にv3.0.2が公開された。
• PST 2013/12/5にv3.0.3が公開された。
• PST 2014/1/30にv3.1.0が公開された。
• PST 2014/2/13にv3.1.1が公開された。
• PST 2014/6/26にv3.2.0が公開された。
• PST 2014/10/29にv3.3.0が公開された。
• PST 2014/11/12にv3.3.1が公開された。
• PST 2015/1/19にv3.3.2が公開された。
• v3.3.3については、v3.3.2公開直後にSassでバグが見つかったのでv3.3.2.1として修正版が公開されたが、それをv3.3.3として再パッケージ化したので、混乱を避けるためBootstrap全体のバージョンでは存在しない。
• PST 2015/3/16にv3.3.4が公開された。
• PST 2015/5/15にv3.3.5が公開された。
• PST 2015/11/24にv3.3.6が公開された。
• PST 2016/7/25にv3.3.7が公開された。
• PST 2018/12/13にv3.4.0が公開された（アラート、カルーセル、折りたたみ、ドロップダウン、モーダル、タブの各コンポーネントでXSSの脆弱性を修正）。
• PST 2019/2/13にv3.4.1が公開された（新しいHTMLサニタイザーを実装することにより、ツールチップとポップオーバープラグインのXSSの脆弱性（CVE-2019-8331）を修正）。

Bootstrap3の今後

Bootstrapプロジェクトチームは、2014/10/29のv3.3.0公開時のブログ記事でBootstrap4のalpha版が数週間でできると発表した（2015/8/19にBootstrap v4.0.0-alphaを公開）。

Bootstrap3を出す際に、Bootstrap2のサポートを廃止したが、多くのユーザーに混乱が生じたので、Bootstrap4を公開後も引き続きBootstrap3のバグの改善やドキュメントの更新を行うとした。

2018/1/18に正式版のBootstrap v4.0.0が公開され、Bootstrap3は現在メンテナンスモードにあり、Bootstrap4に注力できるようにするため新しい機能は搭載されないことになった。

さらに2019/7/24をもってサポート終了となり、重要なセキュリティアップデートは行われないことがブログで発表された。

• モバイルファースト
• レスポンシブデザインに1本化（bootstrap-responsive.cssは不要に、レスポンシブにしたくない場合は「レスポンシブの無効化」を参照すること）
• アイコンはpng画像からwebフォントに変更（img/は不要、fonts/が追加）
• Internet Explorer7とFirefox3.6はサポート外に
• フラットデザインの導入（フラットにしたくない場合のためにbootstrap-theme.cssが3RC2の途中で追加）
• 一般的なWeb標準に準拠して、容易にアクセシビリティを高めることが可能

v3.4.xでの変更

v3.4.xでの設定変更一覧

v3.3.xでの変更

v3.3.xでの設定変更一覧

v3.2.xでの変更

v3.2.xでの設定変更一覧

v3.1.xでの変更

v3.1.xでの設定変更一覧

v3.0.xでの変更

v3.0.xでの設定変更一覧

Bootstrapは、最新のデスクトップとモバイルブラウザで最適に動作するように作られている。古いブラウザでは、一部のコンポーネントのレンダリングは完全に機能しているが、異なるスタイルの表示が可能。

サポート対応ブラウザ（Supported browsers）

具体的には、次のブラウザとプラットフォームの最新バージョンをサポート。

WebKit、Blink、またはGeckoの最新バージョンを直接またはプラットフォームのWebビューAPI経由で使用する代替ブラウザでは、明示的にサポートしていないが、Bootstrapは（ほとんどの場合）これらのブラウザで正しく表示され、正しく機能するはずである。より具体的なサポート情報は以下のとおり。

モバイルデバイス（Mobile devices）

一般的にBootstrapは各主要プラットフォームの標準ブラウザの最新バージョンをサポート対応済。プロキシブラウザ（Opera Mini、Opera Mobileのターボモード、UC Browser Mini、Amazon Silkなど）はサポート対応していない。

デスクトップブラウザ（Desktop browsers）

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポート対応済。

Windowsでは、Internet Explorer 8-11をサポート。

Firefoxの場合、最新の通常安定版に加えて、Firefoxの延長サポート版（ESR）のバージョンもサポートしている。

Bootstrap3は、Chromium、Linux版Chrome、Linux版Firefox、Internet Explorer7、Microsoft Edgeを正式にはサポートしないが、非公式にはこれらでも十分に表示され動作するはず。
※Microsoft Edgeは、Bootstrap4以降でサポート対象。

Bootstrapが取り組まなければならないいくつかのブラウザのバグのリストについては、Bootstrap3公式のWall of browser bugsに記載。

Internet Explorer8と9（Internet Explorer 8 and 9）

Internet Explorer 8,9もサポートしているが、一部のCSS3のプロパティとHTML5の要素がこれらのブラウザで完全にサポートしていないので注意。また、Internet Explorer 8では、Respond.jsを使用してメディアクエリのサポートを有効にする必要がある（設置方法は基本のテンプレート参照）。
※Internet Explorer8,9は、Bootstrap4以降はサポート対象外。

CSS3とHTML5の機能のブラウザサポートの詳細については、Can I use...に記載。

Internet Explorer 8とRespond.js（Internet Explorer 8 and Respond.js）

Internet Explorer 8の開発環境と運用環境でRespond.jsを使用する際には、以下の注意点がある。

Respond.jsとクロスドメインCSS

別の（サブ）ドメインでホストされているCSS（例：CDN）でRespond.jsを使用するには、追加の設定が必要。詳細については、Respond.jsのドキュメントに記載。

Respond.jsとfile://

ブラウザのセキュリティ規則のため、Respond.jsは（ローカルHTMLファイルを開くときなど）file：//プロトコルで表示されるページでは機能しない。Internet Explorer8でレスポンシブ機能をテストするには、HTTP(S)でページを表示すること。詳細については、Respond.jsのドキュメントに記載。

Respond.jsと@import

Respond.jsは@import経由で参照されるCSSでは動作しない。特に、いくつかのDrupal設定は@importを使用することが知られている。詳細については、Respond.jsのドキュメントに記載。

Internet Explorer 8とbox-sizing（Internet Explorer 8 and box-sizing）

Internet Explorer8は、box-sizing: border-box;をmin-width,max-width,min-height,max-heightとの組み合わせて使用することを完全にサポートしていないため、v3.0.1以降.containersではmax-widthを使用しなくなった。

Internet Explorer 8と@font-face（Internet Explorer 8 and @font-face）

Internet Explorer8は、@font-faceを:beforeと組み合わせるといくつかの問題がある。Bootstrap3ではグリフアイコンをその組み合わせで使用しているため、ページがキャッシュされ、ウィンドウの上にマウスを置かずに読み込む（つまり、更新ボタンを押すかiframeで何かを読み込む）場合、ページはフォントが読み込まれる前にレンダリングされてしまうので、ページ（body）にカーソルを合わせるといくつかのアイコンが表示され、残りのアイコンの上にカーソルを置くと同様に表示される（詳細については問題＃13863に記載）。

Internet Explorerの互換モード（IE Compatibility modes）

Bootstrap3は、古いInternet Explorerの互換モードをサポートしていない。IEの最新のレンダリングモードの使用を確実にするには適切な <meta> タグをページに組み込むこと：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

デバッグツールを開いてドキュメントモードの確認：F12キーを押して「ドキュメントモード」を確認。

このタグは、サポートしている各バージョンのInternet Explorerで最高のレンダリングを実現するため、Bootstrap3の公式のドキュメントと見本のすべてに組み込まれている。
※このサイトも同様。

詳細については、StackOverflowの質問に記載。

Windows8でのInternet Explorer10とWindows Phone8での注意（Internet Explorer 10 in Windows 8 and Windows Phone 8）

Internet Explorer10は、デバイス幅をビューポートの幅と区別しないため、Bootstrap3のCSSメディアクエリが適切に適用されない。これを修正するには、通常は以下のCSSの迅速なスニペットを追加するだけ：

@-ms-viewport       { width: device-width; }

しかし、これはアップデート3（別名GDR3）より古いWindows Phone8を実行しているデバイスでは、狭い「phone」表示でなくほとんどデスクトップ表示が表示されるため、この機能が動作しないので、これを修正するには、バグの回避として以下のCSSやJavaScriptを組み込む必要がある。

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2018 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
	var msViewportStyle = document.createElement('style')
	msViewportStyle.appendChild(
		document.createTextNode(
			'@-ms-viewport{width:auto!important}'
		)
	)
	document.querySelector('head').appendChild(msViewportStyle)
}

詳細および使用方法のガイドラインについては、Windows Phone8とDevice-Widthに記載。

注意：Bootstrap3.xの公式マニュアルと実例にはこれが組み込まれている
※このサイトでは省略。

Safariのパーセンテージ切上げ機能（Safari percent rounding）

iOSv8.0とOS Xのv7.1以前のバージョンのSafariのレンダリングエンジンには、.col-*-1グリッドクラスで使用される小数点以下の桁数に問題があった。したがって、12個のグリッド列のページを作っていたら、列が他の行の列と比較して短くなっている。Safari/iOSのアップグレードに加えて、回避策としていくつかの選択肢がある。

• 最後のグリッド列に.pull-rightを追加して、強制的に右端をそろえる
• 手動でパーセンテージを微調整して、Safariの完璧な切上げ機能を取得する（最初の選択肢よりも難しい）

モーダル、ナビゲーションバー、仮想キーボード（Modals, navbars, and virtual keyboards）

オーバーフローとスクロール（Overflow and scrolling）

<body>要素のoverflow: hiddenサポートは、iOSとAndroid ではかなり制限されている。そのため、これらのいずれかのデバイスのブラウザではモーダルの上部または下部を過ぎてスクロールしたときに、表示されないはずの<body>コンテンツがスクロールを始めてしまう。Chrome bug #175502（Chrome v40で修正済み）や WebKit bug #153852に記載。

iOSのテキストフィールドとスクロール（iOS text fields and scrolling）

iOS9.3以降では、モーダルを開いている間にスクロールジェスチャーの最初のタッチが、テキストの <input> か <textarea> の境界内にある場合は、モーダルの代わりに <body> のコンテンツ自体がスクロールされる。WebKit bug #153856に記載。

仮想キーボード（Virtual keyboards）

また、固定のナビゲーションバーを使用している場合やモーダル内で入力を使用している場合、iOSでは仮想キーボードが起動したときに固定要素の位置を更新しないレンダリングのバグがある。これには回避策として、要素をposition: absoluteにするか、手動で位置を修正しようとするためのタイマーを呼び出す方法がある。これはBootstrapによって処理されないので、どちらの解決策がアプリケーションに最適か自分で決めること。

ナビゲーションバーのドロップダウン（Navbar Dropdowns）

.dropdown-backdrop要素（メニューの外側をクリックするとドロップダウンメニューを閉じる機能）は、z-index作成の複雑さのためにiOSの上のナビゲーションでは使用できない。従って、ナビゲーションバーでドロップダウンを閉じるには、ドロップダウン要素（またはiOSのクリックイベントを発生させる他の要素）を直接クリックする必要がある。

ブラウザのズーム（Browser zooming）

ページズームは、必然的にBootstrapや他のインターネットの両方で一部のコンポーネントでは人為的なレンダリング表示をする。問題によっては、最初に検索してから問題を開いて修正する場合もあるが、大抵はハックの回避策以外には直接的な解決策がないことが多いので、これらを無視する傾向がある。

モバイルでの焦点（Sticky :hover/:focus on mobile）

実際のホバリングは、ほとんどのタッチスクリーン上で不可能であるにもかかわらず、ほとんどのモバイルブラウザはエミュレートでホバリングをサポートして :hover で"sticky"する。つまり、:hover スタイルは、ユーザーが要素をタップした後に適用を開始し、他の要素をタップした後のみ適用を停止する。これは、ブートストラップの:hover状態が望ましくないブラウザに"stuck"するようになる可能性がある。一部のモバイルブラウザでは、同様に:focusにも"sticky"がある。現在、このようなスタイルを完全に削除する以外に、これらの問題を簡単に回避する策はない。

印刷での注意点（Printing）

モダンブラウザでさえ、印刷上の欠陥がある。

特にChrome v32では、マージンの設定に関係なく、Webページの印刷中にメディアクエリを解決する際に、Chromeは物理的なページサイズよりも大幅に狭いビューポートの幅を使用する。これにより、印刷時にBootstrapの極小グリッドが予期せずにアクティブ化される可能性がある（詳細は問題#12078とChromeバグ#273306に記載）。推奨する対象方法：

• 極小グリッドを受け入れ、ページがその下で許容できる範囲で見えるようにする
• Lessの@screen-*変数の値をカスタマイズして、プリンター用紙が極小グリッドより大きく見えるようにする
• カスタムメディアクエリを追加して、印刷メディア用のグリッドサイズのブレークポイントを変更する

また、Safari v8.0では、固定幅の .container で印刷時にSafariのフォントサイズが異常に小さくなることがある。詳細は問題#14868やWebKitバグ#138192に記載。このための可能性のある回避策の一つとして、次のCSSを追加：

@media print {
	.container {
		width: auto;
	}
}

Androidの標準ブラウザ（Android stock browser）

Android 4.1以降では、標準のWebブラウザとしてChromeではなく"ブラウザ"アプリが提供されているが、残念なことに"ブラウザ"アプリには大概のCSSでバグや不整合がたくさん存在する。

選択メニュー（Select menus）

<select> 要素で border-radius または border を適用すると、Androidの標準ブラウザはサイドのコントロールを表示しない（詳細はこのStackOverflowの質問に記載）。以下のコードスニペットを使用して問題のあるCSSを削除し、Androidの標準ブラウザ上の <select> を非スタイル要素としてレンダリングする。ユーザエージェントのデータ収集解析においてはChrome、Safari、Mozillaブラウザとの干渉を回避している。

<script>
$(function () {
	var nua = navigator.userAgent
	var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
	if (isAndroid) {
		$('select.form-control').removeClass('form-control').css('width', '100%')
	}
})
</script>

実例を見たいなら、このJS Binのデモをチェックすること。

検証ツール（Validators）

古いものやバグの多いブラウザで最善の体験を提供するために、Bootstrapはいくつかの場所でCSSブラウザのハックを使用して、特別なCSSを特定のバージョンのブラウザに設定しブラウザ自体のバグを回避している。これらのハックは当然のことながら、CSS検証ツールにそれらが無効であると訴える。いくつかの場所ではまた標準化されていない最先端CSSの機能を使用しているが、これらは純粋に進歩的な拡張のために使用されている。

これらの検証警告は、CSSの非ハック部分を完全に検証しないと、ハックされた部分が意図的にこれらの特定の警告を無視し、非ハック部分の適切な機能を妨害しないので実際には問題にならない。

BootstrapのHTMLドキュメントには、同様に起因する特定のFirefoxのバグの回避策が組み込まれているため、いくつかの些細で取るに足らないHTMLの検証警告もある。

サードパーティのプラグインまたはアドオンを正式にサポートしているわけではないが、プロジェクトの潜在的な問題を回避するための役立つアドバイスを提供している。

ボックスサイズ（Box-sizing）

GoogleマップやGoogleカスタム検索エンジンを含むサードパーティの一部のソフトウェアは、* { box-sizing: border-box; }によってBootstrapと競合し、paddingを作成するルールは、要素の最終的な計算幅には影響しない。ボックスモデルとサイジングの詳細については、CSS Tricksを参照。

属性に応じて、必要な再定義をしたり（オプション1）、領域全体のボックスサイズをリセットしたりすることが可能（オプション2）。

/* ボックスサイズのリセット
 *
 * Bootstrapの全体的なボックスモデル設定による競合を避けるために、
 * 個々の要素をリセットするか、または領域を再定義する。
 * 2つのオプション、個々の再定義と領域のリセットは、
 * 簡素なCSSとコンパイルされていないLess形式として利用可能。
 */

/* オプション1A：CSSを使用して単一要素のボックスモデルを再定義 */
.element {
	-webkit-box-sizing: content-box;
		 -moz-box-sizing: content-box;
					box-sizing: content-box;
}

/* オプション1B：BootstrapのLess mixinを使用して単一要素のボックスモデルを再定義 */
.element {
	.box-sizing(content-box);
}

/* オプション2A：CSSを使用して領域全体をリセット */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
	-webkit-box-sizing: content-box;
		 -moz-box-sizing: content-box;
					box-sizing: content-box;
}

/* オプション2B：カスタムLess Mixinで領域全体をリセット */
.reset-box-sizing {
	&,
	*,
	*:before,
	*:after {
		.box-sizing(content-box);
	}
}
.element {
	.reset-box-sizing();
}

Bootstrapは、一般的なWeb標準に準拠しており、最小限の労力で障害者支援技術ATを利用してアクセス可能なサイトを作成することが可能。

ナビゲーションをスキップ（Skip navigation）

ナビゲーションには多くのリンクが含まれており、文書内のメインコンテンツの前に来る場合は、ナビゲーションの前に「メインコンテンツへスキップ」というリンクを追加すること（簡単な説明はA11Y Project article on skip navigation linksに記載）。.sr-only クラスを使用すると視覚的にはスキップリンクは視覚的に非表示になり、.sr-only-focusable は一旦フォーカスすると（目の見えるキーボードの使用者のために）リンクが確実に見えるようにする。

<body>
	<a href="#content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>
	...
	<div class="container" id="content">
		<!-- メインページのコンテンツ -->
	</div>
</body>

入れ子になった見出し（Nested headings）

入れ子の見出し（<h1>～<h6>）を使用する場合は、最初の文書の見出しは <h1> にする必要があり、その次の見出しは、論理的に <h2>～<h6> を使用して、スクリーンリーダーがページの目次を作成できるようにする必要がある。

詳細は、HTML CodeSnifferやPenn State’s Accessabilityに記載。

色の対比（Color contrast）

現在、Bootstrapで使用可能なデフォルトの色の組み合わせのいくつか（様々なスタイル付きボタンクラス、基本コードブロックで使用される色を強調する色の一部、.bg-primaryコンテキスト背景色ヘルパークラス、白い背景色でのデフォルトのリンク色）は低いコントラスト比（推奨比4.5：1より低い）を有する。これは、視力の弱いユーザーや色盲のユーザーに問題を引き起こす可能性がある。これらのデフォルトの色は、コントラストと読みやすさを高めるために変更する必要がある。

その他のリソース（Additional resources）

• “HTML Codesniffer” bookmarklet for identifying accessibility issues（HTMLソースコードをチェックし、定義済みのコーディング標準の違反を検出するためのブックマークレット）
• Chrome's Accessibility Developer Tools extension（アクセシビリティ監査用のChrome拡張機能）
• Colour Contrast Analyser（テキストの読みやすさと、グラフィカルコントロールやビジュアルインジケータなどの視覚的要素のコントラストを判断するために使用）
• The A11Y Project（Webアクセシビリティをより簡単にするためのコミュニティによる取り組み）
• MDN アクセシビリティ（Mozilla開発者によるアクセシビリティのマニュアル）
• ※参考：Using WAI-ARIA in HTML（日本語訳）
• ※参考：WAI-ARIA の基礎知識（Website Usability Info）