迅速なモバイル・フレンドリーとレスポンシブ開発のため、Bootstrapには、表示、隠蔽、整列と内容の間隔ための何十ものユーティリティ・クラスが含まれています。
ディスプレイを変更する
表示プロパティの一般的な値をレスポンシブに切り替えるには、私たちのディスプレイ・ユーティリティを使用します。特定のビューポートで、それらを表示や隠蔽するために、それを、私たちのグリッドのシステム、内容やコンポーネントで結び付けます。
フレックスボックス・オプション
Bootstrap 4は、フレックスボックスでビルドされていますが、すべての要素の表示が、変更されたり、表示されるわけではありません。：フレックスは、多くの不必要なものに上書きを追加し、予想外に、キー・ブラウザ動作を変更します。ほとんどの私たちのコンポーネントは、フレキシボックスを有効にして構築されています。
あなたは、表示を追加する必要があります。：要素をフレックスで動作するために、（.d-sm-flexのような）.d-flexやレスポンシブ・バリアントの１つで行います。大きさの設定、位置合せ、間隔変更などのための特別なフレックスボックス・ユーティリティを使用するために、あなたは、このクラスやdisplay値を必要とします。
マージンとパディング
どのように要素とコンポーネントが、間隔をあけ、サイズ設定をされるか制御するかのために、マージンとパディング間隔ユーティリティを使用します。Bootstrap 4には、間隔ユーティリティのために、5つの基準の大きさが含まれています。
1rem値のデフォルトの$spacer変数に基づいています。（margin-right:1remのための.mr-3のような）、すべてのビューポートのための値を選択します。あるいは、（mdブレークポイントで開始するmargin-right:1remのための.mr-md-3のような）特定のビューポートを対象とするために、レスポンシブ・バリアントを選択します。
表示属性を切り替える
表示を切り換える必要とされないとき、あなたは、私たちの表示属性ユーティリティで要素の表示属性を切り換えることができます。見えない要素は、まだ、ページの配置に影響を及ぼしますが、視覚的に訪問者から隠されています。
