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

より高速なモバイル対応かつレスポンシブな開発のために、Bootstrap にはコンテンツの表示、非表示、整列、スペース設定用のユーティリティクラスが多数含まれています。

display の変更

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

Flexbox オプション

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

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

マージンとパディング

spacing ユーティリティである margin と padding を使用して、要素とコンポーネントの間隔とサイズを制御します。Bootstrap 4 には、既定の $spacer 変数 1rem の値に基づく 5 レベルのスケールの spacing ユーティリティが用意されています。すべてのビューポートの値を選択するか（例: .mr-3 は margin-right: 1rem の場合）、または特定のビューポートをターゲットとするレスポンシブなバリアントを選択できます（例: .mr-md-3 は md ブレークポイントから開始して margin-right: 1rem の場合）。

visibility の切り替え

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