Bootstrapレスポンシブブレークポイントリファレンス
Bootstrap 5レスポンシブブレークポイント（sm、md、lg、xl、xxl）のピクセル値、グリッド動作、Tailwind CSSブレークポイントとの比較の完全リファレンスです。
Responsive Breakpoints
詳細な説明
Bootstrap 5ブレークポイント
BootstrapはTailwindと類似したモバイルファーストブレークポイントシステムを使用していますが、閾値の値が異なります。
デフォルトブレークポイント
| プレフィックス | 最小幅 | コンテナ最大幅 |
|---|---|---|
| （なし） | 0px | 100%（フルード） |
| sm | 576px | 540px |
| md | 768px | 720px |
| lg | 992px | 960px |
| xl | 1200px | 1140px |
| xxl | 1400px | 1320px |
Tailwind CSSとの比較
| ブレークポイント | Bootstrap | Tailwind |
|---|---|---|
| Small | 576px | 640px |
| Medium | 768px | 768px |
| Large | 992px | 1024px |
| Extra Large | 1200px | 1280px |
| 2X Large | 1400px | 1536px |
Bootstrapのブレークポイントは一般的にTailwindより低く、より狭いビューポートで次のティアに到達します。
どちらを選ぶべきか？
- Bootstrap: コンテンツの多いサイトに最適、コンテナ最大幅を含む
- Tailwind: ユーティリティファースト、現代のデバイス状況に合った若干広いブレークポイント
ユースケース
Bootstrapを使用する開発者は、レスポンシブグリッドを構築しレイアウトの問題をデバッグするために正確なブレークポイント値が必要です。Tailwindとの比較はフレームワーク移行を検討するチームに役立ちます。