Bootstrap 5ブレークポイント：グリッドシステムとデバイスカバレッジ

Bootstrap 5ブレークポイントリファレンス

Bootstrap 5は、レスポンシブレイアウト構築のためにデフォルトのxsを含む6つのブレークポイント層を使用します。各ブレークポイントはmin-widthメディアクエリを使用します。

デフォルトブレークポイント

ブレークポイント	クラス接頭辞	最小幅	最大幅
Extra small	なし	0px	575px
Small	sm	576px	767px
Medium	md	768px	991px
Large	lg	992px	1199px
Extra large	xl	1200px	1399px
Extra extra large	xxl	1400px	-

デバイスマッピング

• xs (< 576px)：ポートレートのすべてのスマートフォン — iPhone (320-440px)、Android (360-448px)
• sm (576-767px)：ランドスケープの大型スマートフォン、小型タブレット
• md (768-991px)：iPadポートレート (820px)、Galaxy Tabポートレート
• lg (992-1199px)：iPadランドスケープ、Chromebook、小型ノートPC
• xl (1200-1399px)：標準ノートPC、デフォルトスケールのMacBook Air
• xxl (1400px+)：MacBook Pro、デスクトップモニター、4Kディスプレイ

Bootstrap vs Tailwind比較

範囲	Bootstrap	Tailwind
スマートフォン→タブレット	sm: 576px	sm: 640px
タブレット	md: 768px	md: 768px
小型デスクトップ	lg: 992px	lg: 1024px
デスクトップ	xl: 1200px	xl: 1280px
大型デスクトップ	xxl: 1400px	2xl: 1536px

Bootstrapはtailwindよりやや低いブレークポイント値を使用しているため、レイアウトが早い段階で切り替わります。768pxのmdブレークポイントは両フレームワークで同一です。

グリッドシステムの使用

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- モバイルで全幅、タブレットで半幅、デスクトップで3分の1幅 -->
    </div>
  </div>
</div>

コンテナのMax-Width

Bootstrapコンテナは各ブレークポイントで異なるmax-widthを持ちます：

• sm: 540px、md: 720px、lg: 960px、xl: 1140px、xxl: 1320px

これらの値は各画面サイズでコンテンツ幅を制約し、一貫したマージンを提供します。