レイアウトユーティリティ

displayの変更

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

Flexboxオプション

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

要素にdisplay: flexを追加する必要がある場合は、.d-flexまたはレスポンシブバリアント（例：.d-sm-flex）を使用します。サイズ、配置、間隔などを制御するための追加のFlexboxユーティリティを使用するには、このクラスまたはdisplay値が必要です。

マージンとパディング

要素とコンポーネントの間隔とサイズを制御するには、marginとpaddingのスペーシングユーティリティを使用します。Bootstrapには、デフォルトの$spacer変数に基づく1rem値の6段階スケールスペーシングユーティリティが含まれています。すべてのビューポートの値を選択するか（例：LTRの場合、margin-right: 1remの.me-3）、特定のビューポートを対象とするレスポンシブバリアントを選択します（例：mdブレークポイントから始まるLTRの場合、margin-right: 1remの.me-md-3）。

visibilityの切り替え

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