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

display を変更（Changing display）

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

Flexboxのオプション（Flexbox options）

Bootstrap4はFlexboxで構築されているが、不必要な上書きを多く追加し、予期せずキーブラウザの動作が変更されるため、すべての要素の display が display: flex に変更されているわけではない。Bootstrapのコンポーネントのほとんどは、Flexbox対応で構築されている。

display: flex を要素に追加する必要がある場合は、.d-flex かレスポンシブ・バリエーションのいずれか（.d-sm-flex など）を使用。このクラスや display の値は、サイズ、配置、余白などのために特別なFlexユーティリティを使用できるようにするために必要である。

マージンとパディング（Margin and padding）

マージンとパディングの空白ユーティリティを使用して、要素とコンポーネントの間隔とサイズを制御。Bootstrap4には、1rem のデフォルトの $spacer 変数に基づいて、空白ユーティリティの5レベルのスケールが組み込まれている。すべてのビューポートの値（margin-right：1rem の場合は .mr-3 など）を選択するか、特定のビューポートをターゲットにするようにレスポンシブ・バリエーションを選択（md ブレークポイントから始まる margin-right：1rem の場合は .mr-md-3 など）。

可視性の切り替え（Toggle visibility）

display を切り替える必要がない場合は、可視性ユーティリティで要素の可視性を切替可能。目に見えない要素はまだページのレイアウトには影響あるが、視覚的には訪問者には表示されない。