ブレークポイント

ブレークポイントは、Bootstrap におけるデバイスまたはビューポートのサイズに応じたレスポンシブレイアウトの動作を決定する、カスタマイズ可能な幅です。

利用可能なブレークポイント

Bootstrap には、レスポンシブ設計のための 6 つのデフォルトブレークポイント、別名「グリッド層」が含まれています。これらのブレークポイントは、Sass ソースファイルを使用している場合にカスタマイズできます。

ブレークポイント	クラスインフィックス	寸法
XS	なし	<576px
SM	sm	≥576px
MD	md	≥768px
LG	lg	≥992px
XL	xl	≥1200px
XXL	xxl	≥1400px

カスタムブレークポイント

カスタムブレークポイントを使用する場合は、テーマプロバイダーでアプリケーションをラップし、使用するブレークポイントを指定するために breakpoints プロパティを使用する必要があります。これにより、Row や Col などのコンポーネントが適切なカスタムブレークポイントプロパティを解析できるようになります。

<ThemeProvider
  breakpoints={['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']}
  minBreakpoint="xxs"
>
  <div>Your app...</div>
</ThemeProvider>;

詳細

ブレークポイントの詳細については、Bootstrap ドキュメントを参照してください。

API

ThemeProvider