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

displayの変更

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

Flexboxオプション

Bootstrapはflexboxで構成されていますが、すべての要素のdisplayがdisplay: flexに変更されているわけではありません。ほとんどのコンポーネントはflexboxを有効にして構成されています。

要素にdisplay: flexを追加する必要がある場合は、.d-flexまたはレスポンシブユーティリティ(例: .d-sm-flex)を使用してください。サイズや配置、間隔などのために追加のflexboxユーティリティを使用するには、このクラスもしくはdisplay値が必要です。

マージンとパディング

要素やコンポーネントの間隔や大きさを制御するには、marginとpaddingの余白ユーティリティを使用します。Bootstrapには、1rem 値のデフォルトの$spacer変数に基づいた、6レベルのスペーシングユーティリティが含まれています。すべてのビューポートに対して値を選択するか(例: LTRで.me-3の場合はmargin-right: 1rem)、特定のビューポートを対象とするレスポンシブユーティリティを選択できます(例: LTRで.me-md-3の場合はmargin-right: 1remでmdブレークポイントから開始)。

visibilityを切り替える

displayの切り替えが不要な場合は、visibilityユーティリティで要素のvisibilityを切り替えることができます。不可視の要素はページのレイアウトに影響を与えますが、訪問者からは視覚的に隠されます。