Utilities for layout (レイアウト用ユーティリティ)
レスポンシブな開発を容易に行うため、Bootstrap には、コンテンツの表示、非表示、整列、スペーシングのための多数のユーティリティクラスが含まれています。
Changing display
display プロパティをレスポンシブに切り替えるには、display utilities を使用します。これをグリッドシステムやコンテンツ、コンポーネントと組み合わせて、特定のビューポートにまたがって表示したり非表示にしたりすることができます。
Flexbox options
Bootstrap は flexbox で構成されていますが、すべての要素の display が display: flex に変更されているわけではありません。ほとんどのコンポーネントは flexbox を有効にして構成されています。
要素に display: flex を追加する必要がある場合は、.d-flex またはレスポンシブユーティリティ(例: .d-sm-flex)を使用してください。サイズや配置、間隔などのために追加の flexbox ユーティリティ を使用するには、このクラスもしくは display 値が必要です。
Margin and padding
margin と padding spacing utilities を使用して、要素やコンポーネントの間隔や大きさを制御します。Bootstrap には、1rem 値のデフォルトの $spacer 変数に基づいた、6 レベルのスペーシングユーティリティが含まれています。すべてのビューポートに対して値を選択するか(例: LTR で .me-3 の場合は margin-right: 1rem )、特定のビューポートを対象とするレスポンシブユーティリティを選択できます(例: LTR で .me-md-3 の場合は margin-right: 1rem で md ブレークポイントから開始)。
Toggle visibility
display を切り替える必要がない場合は、visibility utilities を使って要素の visibility を切り替えることができます。見えない要素はページにはレイアウトされますが、視覚的に見えなくなります。