レイアウトユーティリティ Utilities for layout

displayの変更

Display utilitiesを使用して、displayプロパティの一般的な値をレスポンシブに切り替えます。gridシステム、コンテンツ、またはコンポーネントと組み合わせて、特定のビューポート間でそれらを表示または非表示にします。

Flexboxオプション

Bootstrapはflexboxで構築されていますが、すべての要素のdisplayがdisplay: flexに変更されているわけではありません。これにより、多くの不要なオーバーライドが追加され、主要なブラウザの動作が予期せず変更されるためです。コンポーネントのほとんどは、flexboxが有効になっています。

要素にdisplay: flexを追加する必要がある場合は、.d-flexまたはレスポンシブバリアント（例：.d-sm-flex）を使用して行います。サイジング、配置、スペーシングなどのための追加のflexbox utilitiesを使用できるようにするには、このclassまたはdisplay値が必要です。

MarginとPadding

marginとpaddingのspacing utilitiesを使用して、要素とコンポーネントのスペーシングとサイズ設定を制御します。Bootstrapには、デフォルトの$spacer変数である1rem値に基づいた6レベルのスケールのspacing utilitiesが含まれています。すべてのビューポートの値を選択する（例：LTRでmargin-right: 1remの場合は.me-3）か、レスポンシブバリアントを選択して特定のビューポートをターゲットにします（例：md breakpointから始まるLTRでmargin-right: 1remの場合は.me-md-3）。

visibilityの切り替え

displayの切り替えが必要ない場合は、visibility utilitiesを使用して要素のvisibilityを切り替えることができます。非表示の要素は、ページのレイアウトに影響を与えますが、訪問者からは視覚的に隠されています。