displayヘルパーを使用すると、コンテンツの表示を制御できます。これには、現在のビューポートまたは実際の要素displayタイプに基づいて条件付きで表示されていることが含まれます。
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Specify the elements display property. These classes can be applied to all breakpoints from xs to xl. When using a base class,.d-{value}, it is inferred to be .d-${value}-xs.
xsの場合は、.d-{value}sm,md,lg,xlの場合は、.d-{breakpoint}-{value}
value プロパティは次のいずれか：
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
ディスプレイヘルパークラスに特定のブレークポイントを設定する場合、指定から上のすべての画面幅に適用されます。たとえば、d-lg-flexは lg と xl のサイズの画面に適用されます。
Conditionally display an element based upon the current viewport. Breakpoint utility classes always apply from the bottom up. That means if you have .d-none, it will apply to all breakpoints. However, .d-md-none will apply to only md and up.
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-flex |
| Hidden only on sm | .d-sm-none .d-md-flex |
| Hidden only on md | .d-md-none .d-lg-flex |
| Hidden only on lg | .d-lg-none .d-xl-flex |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-flex |
| Visible only on xs | .d-flex .d-sm-none |
| Visible only on sm | .d-none .d-sm-flex .d-md-none |
| Visible only on md | .d-none .d-md-flex .d-lg-none |
| Visible only on lg | .d-none .d-lg-flex .d-xl-none |
| Visible only on xl | .d-none .d-xl-flex |
さらに、横形式の表示ヘルパー クラスを使用して、現在の viewport に基づいて要素を表示することもできます。これらのクラスは、次の hidden-{breakpoint}-{condition} 形式で適用できます。
condition は、次のクラスベースを適用します:
only-xsからxlのブレークポイントでのみ要素を非表示にします。
Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.
印刷用に表示プロパティを変更することもできます。
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
印刷ユーティリティー・クラスは、印刷時の表示ユーティリティーを使用しない場合にも組み合わせることができます。
Use the d-sr utility classes to conditionally hide content on all devices except screen readers.
d-sr-onlyvisually hides elements but will still announce to screen readers.d-sr-only-focusablevisually hides an element until it is focused. This is useful when implementing skip links.