Utilities for layout

モバイルフレンドリーでレスポンシブな開発のために, コンテンツの表示, 非表示, 整列, 余白などのユーティリティクラスが組み込まれています。

Changing display

レスポンシブに display を切り替えるには display utilities を使用します。 グリッドシステム, コンテンツ, コンポーネントを組み合わせて, 特定の viewport で表示や非表示にすることができます。

Flexbox options

Bootstrap4はFlexboxで構築されています。不必要な上書きを多く追加し, 予期せぬブラウザの動作変更をさけるため, すべての要素の display が display: flex に変更されているわけではありません。our components のほとんどは, Flexbox対応で構築されています。

display: flex を要素に追加する場合は, .d-flex や responsive variantsのいずれか（例：.d-sm-flex ）を使用します。 クラスや display の値は, サイズ, 配置, 余白などのFlexユーティリティを使用できるようにするために必要です。

Margin and padding

margin と padding は spacing utilities を使用して要素とコンポーネントの間隔とサイズを調整できます。Bootstrap4には, 1rem のデフォルトの $spacer 変数で空白ユーティリティに5レベルのスケールが組み込まれています。vieportの値（ margin-right：1rem の場合は .mr-3 など）を選択するか, 特定の viewport をターゲットにするように responsive variants を選択します。（例： md ブレークポイントから始まる margin-right：1rem の場合は .mr-md-3 ）

Toggle visibility

display を切り替える必要がない場合は visibility utilities で要素の可視性を切り替えることができます。目に見えない要素はページのレイアウトに影響があるが視覚的には訪問者には表示されません。